javascript - 在输入字段问题中物化CSS下拉菜单

Question

当用户在输入字段中输入查询时，我的项目需要自动建议。我尝试使用 ma​​terialize CSS、Ajax、Django、Jquery 实现如下:

HTML 页面:

 <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 代码片段:

$(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>");
        });

    }
  });
  });
});

• 我能够从后端获取数据，并且 li 元素会附加选定的 ul 元素，但它不会在前端显示为下拉列表。
• 请参阅具体化 CSS dropdown :
• 我怀疑CSS有问题，请点击这里

Answer 1

您不应该使用下拉菜单，您应该使用自动完成功能

https://materializecss.com/autocomplete.html

还记得调用初始化函数，因为这就是您当前缺少的功能。通过以下修改，它应该可以工作。但同样，您应该为此使用自动完成功能。

$(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();
    ///////////////////////////////////////////////////

    }
  });
  });
});