Материализация раскрывающегося списка CSS в поле ввода - PullRequest
Новая
       11

Материализация раскрывающегося списка CSS в поле ввода

0 голосов
/ 28 мая 2019

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

    }
  });
  });
});
  • Я могу получить данные из бэкэнда, и элементы li добавляются с выбранными элементами ul , ноон не отображается как выпадающий в интерфейсе.
  • См. материализуйте CSS dropdown :
  • Я подозреваю, что проблема с CSS, пожалуйста, здесь

1 Ответ

1 голос
/ 28 мая 2019

Вы не должны использовать раскрывающийся список для этого, вы должны использовать автозаполнение

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

    }
  });
  });
});
...