Question

当用户在输入字段中输入查询时，我的项目需要自动提示。我尝试使用具体化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();
    ///////////////////////////////////////////////////

    }
  });
  });
});

在输入字段问题中实现CSS下拉菜单

1 个答案: