Как я могу динамически c данных в автозаполнении материализации? - PullRequest
Новая
       53

Как я могу динамически c данных в автозаполнении материализации?

1 голос
/ 19 марта 2020

Я хочу использовать данные, которые я получаю из базы данных при нажатии клавиши. Я попробовал это, но это не сработало. 

$('#QTag').keyup(function (event) {
        let tags = [];
            $.ajax({
                type: 'POST',
                url: '/tryauto',
                data: {
                    'key': $(this).val()
                },
                success: function (dataDB) {
                    $.each(dataDB,function (index,value) {
                        tags.push(value);
                    });
                    $('input.autocomplete').autocomplete({
                        data: tags
                    });
                }
            });
    });

Я также попробовал $('input.autocomplete').autocomplete('updateData',tags); это, но это тоже не сработало.

-

Это мой Laravel контроллер 

public function denemeauto(Request $request){
    $tags = $request->get('key');
    return DB::table('tags')->where('tag_title', 'LIKE', $tags . '%')->get();
}

1 Ответ

1 голос
/ 20 марта 2020

Хорошо, вот моя первая попытка помочь исправить это. https://codepen.io/tuffant21/pen/KKpBapd Первое, что я заметил, это то, что вы используете массив для автозаполнения. Обратите внимание, что автозаполнение ожидает объект, а не массив.

Во-вторых, вам нужно инициализировать автозаполнение при загрузке страницы. Затем обновите объект данных в экземпляре, используя instance.options.data. $ ('# QTag'). Keyup () ... должен быть внутри функции $ (document) .ready () ....

Наконец, поскольку он изначально загружается без каких-либо данных, будет задержка, прежде чем появится информация о автозаполнении. Вам нужно будет набрать, подождать секунду и продолжить печатать. С этим текущим методом вы столкнетесь с загрузкой данных в фоновом режиме при каждом вводе ключа и заменой старых данных.

Дайте мне знать, как еще я могу уточнить это, если вам нужно больше объяснений или помощи! 

// make sure you load jquery before materialize

$(document).ready(function(){
  $('input.autocomplete').autocomplete({
    data: {foo: 'bar'}
  });
  
  $('#QTag').keyup(function (event) {
    const instance = M.Autocomplete.getInstance(document.getElementById('QTag'));
    // autocomplete expects an object, not an array
    // let tags = []; before
    let tags = {}; // after

    // mimic api call
    setTimeout(() => {
      const dataDB = [
        {tag_id:'12',tag_title:'love',tag_link:'love'}
      ];

      $.each(dataDB, function (index, value) {
        // since it is an object, don't use push
        // tags.push(value); before
        tags[value.tag_title] = value.tag_id; // after
      });
      instance.options.data = tags;
    }, 500);
  });
});
<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="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="QTag" type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
...