Question

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

字段名称是一个AutoComplete字段，用于获取正确的数据。 ID字段并不重要。

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

当用户写入数据时，会出现问题＆＃34;背后＆＃34; AutoComplete正在正确更改，但AutoComplete的下拉组件隐藏。用户必须在“自动完成”字段外单击，然后单击它以查看更改，这绝对不是用户友好的。

＆＃13;

$(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.
          });
        }
      });
    });

  });
});

＆＃13;

<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>

＆＃13;

在这个例子中，当用户开始写入时，它会获得新数据（从？page = 1到？page = 2）

我希望看到自动完成功能的数据在保持打开状态时发生变化。

我也在Codepen

上做了一个例子

Answer 1

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

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

我使用了您的codePen并对其进行了重构，因此您可以获得自动填充方法updateData的示例。 Codepen

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

1 个答案: