Materialize - 使用 ajax 更改数据时自动完成隐藏

Question

我正在使用 MaterializeCSS 和 jQuery 制作表单。我有 2 个字段：Name 和 ID。

字段名称是获取正确数据的自动完成字段。 ID 字段并不重要。

我正在尝试实现一种功能，以便在用户写入时获取数据。

当用户写入时出现问题：自动完成“后面”的数据正在正确更改，但自动完成的下拉组件隐藏。用户必须在 AutoComplete 字段之外单击并再次单击它才能看到更改，这绝对不是用户友好的。

$(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）

我想在 AutoComplete 保持打开状态时查看它的更改数据。

我也在Codepen上做了一个例子

Answer 1

每次用户写入时，自动完成组件都会隐藏，因为您为每个 keyup 初始化 #name_autocomplete。每次调用init 函数时，它都会关闭自动完成建议。

Materialize 有一个特定的方法updateData 来刷新提供的初始对象：http://materializecss.com/autocomplete.html

我使用了您的 codePen 并对其进行了重构，以便您可以查看自动完成方法 updateData 的示例。 Codepen