<div id="basic" class="form-outline" data-mdb-input-init>

  <input id="testId" type="text" name="" class="form-control input_small recipe_process_ingredient_name" placeholder="Recipe"  >

</div>

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>

​

$(document).on("keyup",".recipe_process_ingredient_name",function(){

  console.log('d')

  const $input = $(this);

    const asyncFilter = async (query) => {

      const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(query)}`;

      const response = await fetch(url);

      const data = await response.json();

      return data.results;

    };

​

//   I applied the same way you suggested but when i console the element it gives... check log

  console.log($input.parent().get(0));

//   while in my case its giving

// <div class="form-outline" data-mdb-input-init="">

//   <input type="text" name="" class="form-control input_small recipe_process_ingredient_name active autocomplete-input" placeholder="Recipe" role="combobox" aria-expanded="false" aria-owns="autocomplete-dropdown-248083" aria-haspopup="true" autocomplete="off">

//   <div class="autocomplete-loader spinner-border" role="status">

//   <span class="sr-only">Loading...</span>

//   </div>

//   </div>

    mdb.Autocomplete.getOrCreateInstance($input.parent().get(0), {

      filter: asyncFilter,

      displayValue: (value) => value.name

    });

  });