javascript - Materialize - 使用 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

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

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

我拿了你的 codePen 并重构了它，所以你可以有一个自动完成方法 updateData 的例子。 Codepen