Materialize css dropdown in input field issue

Question

My project required auto-suggestion in when user input their query in the input field. I have tried to implement using materialize CSS, Ajax, Django, Jquery as follows:

HTML PAGE:

 <div class="row" id ="adddiv"> 
        <div class="input-field col s3">
          <input placeholder="Stock Item" type="text" name="StockItem-1" class="validate dropdown-trigger" data-target="dropdown1" id="stockitem">
          <ul id="dropdown1" class="dropdown-content">
          </ul>
        </div>

JS Snippet:

$(function(){
  // $("#stockitem").change(function(){
    $('.dropdown-trigger').keyup(function(){
    $('.dropdown-content').html("")
    var query = $('.dropdown-trigger').val();
    var data = {'query':query}
    var url = 'auto_suggest'
    $.ajax({
     type: "GET",
     url: url,
     dataType : 'json',
     data: data,
     contentType: 'application/x-www-form-urlencoded;charset=utf-8',
     success: function(data)
     {
      var results = data["resultlist"]
      $.each(results, function(index,value){
          $('.dropdown-content').append("<li>"+ value +"</li>");
        });

    }
  });
  });
});

• I am able to get the data from backend and li elements are appending with selected ul elements, but it's not displaying as dropdown in front-end.
• Refer materialize CSS dropdown:
• I suspect the problem with CSS please here

Answer 1

You shouldn't be using the drop down for that, you should be using the autocomplete

https://materializecss.com/autocomplete.html

Also remember to call the Initialization functions as that's what it looks like you are currently missing. With the below modifications it should work. But again, you should be using the autocomplete for this.

$(function(){

    ///////////////////////////////////////////////
    // YOU HAVE TO INITIALIZE THE DROPDOWN
    const dropDownEl = $('.dropdown-trigger')[0]
    M.Dropdown.init(dropDownEl)
    ///////////////////////////////////////////////////

  // $("#stockitem").change(function(){
    $('.dropdown-trigger').keyup(function(){
    $('.dropdown-content').html("")
    var query = $('.dropdown-trigger').val();
    var data = {'query':query}
    var url = 'auto_suggest'
    $.ajax({
     type: "GET",
     url: url,
     dataType : 'json',
     data: data,
     contentType: 'application/x-www-form-urlencoded;charset=utf-8',
     success: function(data)
     {
      var results = data["resultlist"]
      $.each(results, function(index,value){
          $('.dropdown-content').append("<li>"+ value +"</li>");
        });
        
    ///////////////////////////////////////////////
    // YOU HAVE TO OPEN THE DROPDOWN
    M.Dropdown.getInstance(dropDownEl).open();
    ///////////////////////////////////////////////////

    }
  });
  });
});