Материализация - автозаполнение скрывается при изменении данных с помощью AJAX - PullRequest
Новая
       18

Материализация - автозаполнение скрывается при изменении данных с помощью AJAX

0 голосов
/ 26 апреля 2018

Я делаю форму, используя MaterializeCSS и jQuery. Я получил 2 поля: Name и ID.

Поле Name - это поле автозаполнения, которое получает правильные данные. Поле идентификатора не важно.

Я пытаюсь реализовать функциональность для получения данных при записи пользователем.

Проблема возникает, когда пользователь пишет: данные «позади» автозаполнения изменяются правильно, но раскрывающийся компонент автозаполнения скрывается. Пользователь должен щелкнуть за пределами поля автозаполнения и снова щелкнуть по нему, чтобы увидеть изменения, что абсолютно не удобно для пользователя. 

$(document).ready(function () {
  //Autocomplete
  $(function () {
    $.ajax({
      type: 'GET',
      url: 'https://reqres.in/api/users?page=1',
      success: function (response) {
        var nameArray = response.data;
        var dataName = {};
        console.log('nameArray = ' + JSON.stringify(nameArray, 4, 4));
        for (var i = 0; i < nameArray.length; i++) {
          dataName[nameArray[i].last_name] = nameArray[i].flag;
        }
        console.log('dataName = ' + JSON.stringify(dataName, 4, 4));
        $('#name_autocomplete').autocomplete({
          data: dataName,
          limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
        });
      }
    });
  });
});


$(document).ready(function () {
  $('#name_autocomplete').keyup(function () {
    $(function () {
      $.ajax({
        type: 'GET',
        url: 'https://reqres.in/api/users?page=2',
        success: function (response) {
          var nameArray = response.data;
          var dataName = {};
          console.log('nameArray = ' + JSON.stringify(nameArray, 4, 4));
          for (var i = 0; i < nameArray.length; i++) {
            dataName[nameArray[i].last_name] = nameArray[i].flag;
          }
          console.log('dataName = ' + JSON.stringify(dataName, 4, 4));
          $('#name_autocomplete').autocomplete({
            data: dataName,
            limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
          });
        }
      });
    });

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<main>

    <div class="container">
        <div id="main_panel_form" class="card-panel col s12">
            <div class="row">
                <form class="col s12" action="/test">
                    <div class="row">
                        <div class="input-field col s4">
                            <input id="name_autocomplete" name="name_autocomplete" type="text" class="autocomplete">
                            <label id='label_name_autocomplete' for="name_autocomplete" class="active">Name</label>
                        </div>
                        <div class="input-field col s3">
                            <input id="id" name="id" type="text" class="autocomplete">
                            <label id="label_id" for="id">ID</label>
                        </div>
                    </div>

                    <div class="row center-align">
                        <button class="btn waves-effect waves-light" type="submit" value="Submit">Submit</button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</main>

В этом примере, когда пользователь начинает писать, он получает новые данные (от? Page = 1 до? Page = 2)

Я хотел бы видеть данные об изменении автозаполнения, пока оно остается открытым.

Я также сделал пример для Codepen

1 Ответ

0 голосов
/ 26 апреля 2018

Компонент автозаполнения скрывается каждый раз, когда пользователь пишет, потому что вы инициализируете #name_autocomplete для каждого keyup. Каждый раз, когда вызывается функция init, она закрывает предложения автозаполнения.

В Materialize есть специальный метод updateData для обновления предоставленного начального объекта: http://materializecss.com/autocomplete.html

Я взял ваш codePen и реорганизовал его, чтобы вы могли получить пример метода автозаполнения updateData. Codepen

...