Блог

Я работал с автозаполнением materialize для своего проекта, и у меня возникли проблемы с отображением выпадающего списка. Он просто не появляется! Я читал, что материализованная версия 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
          });
        }
      });
    });
  });
 

Поскольку кто-то запросил ответ, я помещаю здесь несколько скриншотов!
это когда я ввожу «ва»

проблема не в том, что данных там нет, просто не появляется выпадающее окно выбора.

Сначала вы можете инициализировать автозаполнение и сохранить его экземпляр в какой-либо переменной . Затем , всякий раз, когда пользователь вводит текст в поле ввода, просто используйте этот экземпляр для обновления данных внутри вашего автозаполнения, т. е.: 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>