实现自动完成下拉菜单不起作用

Question

我一直在为我的项目使用实现自动完成功能，但在显示下拉菜单时遇到了问题。它只是无法出现！我读到具体化版本 0.98.2 可能会工作，我使用了那个 CDN，但它仍然无法工作。我怀疑触发下拉菜单存在一些问题。 （我可能是非常错误的）另一件事可能是错误的，因为我在某个地方搞砸了数据没有被使用。

我在获取和使用数据时没有问题，但下拉菜单不起作用。

html:

<div class="input-field">
    <label for="country">Autocomplete</label>
    <input type="text" id="company" class="autocomplete">
</div>

这是我的 js：

var company = document.getElementById("company");

  company.addEventListener("input", function () {
      $(function() {
      var inputValue = $('#company').val();
      var url = 'https://sandbox.iexapis.com/stable/search/'
              + encodeURIComponent(inputValue)
              + '/?token=****************';
      
       $.ajax({
        type: 'GET',
        url: url,
        success: function(response) {
          
          var companyArray = response;
          var dataCompany = {};
          for (var i = 0; i < companyArray.length; i++) {
            //console.log(countryArray[i].name);
            console.log(url);
            dataCompany[companyArray[i].securityName] = companyArray[i].symbol;
            console.log(companyArray[i].securityName);
            console.log(companyArray[i].symbol);
          }
          $('input.autocomplete').autocomplete({
            data: dataCompany
          });
        }
      });
    });
  });

由于有人要求回复，我在这里放了一些屏幕截图！ 这是我输入“wa”的时候

问题不在于数据不存在，而在于下拉选择框没有出现。

Answer 1

您可以首先初始化您的自动完成并将其实例存储在某个变量中。然后，每当用户在输入框中键入时，只需使用该实例来更新自动完成中的数据，即：instance.updateData(dataCompany)。

演示代码：

//suppose this is response return from ajax
var response = [{
  "securityName": "abc",
  "symbol": "scsc"
}, {
  "securityName": "abc2",
  "symbol": "scsc2"
}]

$(function() {
  $('input#company').autocomplete() //intialize your autocomplete
  let instance = M.Autocomplete.getInstance($('input#company')); //get instance
  $('input.autocomplete').on("input", function() {
    var inputValue = $('#company').val();
    /*var url = 'https://sandbox.iexapis.com/stable/search/' +
      encodeURIComponent(inputValue) +
      '/?token=****************';
    $.ajax({
      type: 'GET',
      url: url,
      success: function(response) {*/
    var companyArray = response;
    var dataCompany = {};
    for (var i = 0; i < companyArray.length; i++) {
      dataCompany[companyArray[i].securityName] = companyArray[i].symbol;

    }
    //updatedata
    instance.updateData(dataCompany)
    /*  }
    });*/

  });
  })

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<div class="input-field">
  <label for="country">Autocomplete</label>
  <input type="text" id="company" class="autocomplete" autocomplete="off">
</div>