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

Question

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

字段“名称”是一个自动完成字段，可获取正确的数据。 ID 字段并不重要。

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

当用户写入时会出现问题:自动完成“后面”的数据正在正确更改，但自动完成的下拉组件会隐藏。用户必须单击“自动完成”字段之外的区域，然后单击返回才能看到更改，这绝对不方便用户。

$(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 上举了一个例子

Answer 1

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

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

我拿走了您的 codePen 并对其进行了重构，以便您可以获得自动完成方法 updateData 的示例。 Codepen