jQuery jQuery UI自动补全功能的JSON

在本文中，我们将介绍如何使用jQuery和jQuery UI来实现自动补全功能，并将其与JSON数据结合使用。

什么是jQuery和jQuery UI自动补全？

自动补全是一种用户界面功能，通过在用户输入时提供建议的方式来增强用户体验。jQuery和jQuery UI是两个广泛使用的JavaScript库，它们提供了一系列函数和UI组件，简化了开发者在网页上添加交互功能的过程。

jQuery UI自动补全组件可以根据用户输入的文本，在页面上显示一个下拉菜单，列出与输入文本相关的建议。这些建议可以是预先定义好的列表，也可以是通过获取JSON数据来动态生成。

准备工作

在开始使用jQuery和jQuery UI自动补全之前，我们需要确保已经导入这两个库。可以通过以下方式将它们添加到网页中：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

此外，我们还需要创建一个包含JSON数据的文件，用作自动补全的建议列表。在这个例子中，我们将使用一个简单的示例JSON文件，其中包含了一些城市名称：

[
  "北京",
  "上海",
  "广州",
  "深圳",
  "杭州",
  "成都",
  "重庆",
  "武汉",
  "天津",
  "南京"
]

将这个JSON文件保存为cities.json。

实现自动补全

我们准备工作完成后，我们可以开始实现自动补全功能了。首先，我们需要创建一个文本输入框和一个用于显示自动补全建议的元素。我们可以使用HTML代码如下：

<input type="text" id="search" autocomplete="off">
<div id="suggestions"></div>

接下来，我们使用jQuery来监听文本输入框的input事件，并在每次输入时触发自动补全功能。我们将在每次输入后动态生成建议列表，并将其显示在指定的元素中。代码如下：

$(document).ready(function() {
  $('#search').on('input', function() {
    var query = $(this).val().toLowerCase();
    var suggestions = [];

    $.getJSON('cities.json', function(data) {
      $.each(data, function(index, value) {
        if (value.toLowerCase().indexOf(query) !== -1) {
          suggestions.push(value);
        }
      });

      $('#suggestions').empty();
      $.each(suggestions, function(index, value) {
        $('#suggestions').append('<div class="suggestion">' + value + '</div>');
      });
    });
  });
});

在这段代码中，我们首先获取用户输入的文本，并将其转换为小写字母，以便在搜索建议时不区分大小写。然后，我们通过使用$.getJSON()函数来获取JSON数据，并使用$.each()函数遍历数据列表。对于每个数据项，我们将其转换为小写字母，并检查是否包含用户输入的文本。如果是，则将其添加到建议列表中。

最后，我们清空之前的建议列表，并使用$.each()函数将每个建议项添加到显示建议的元素中。

现在，当用户在文本输入框中输入时，自动补全功能将会根据用户输入的文本，从JSON数据中筛选出相关的建议，并动态显示在页面上。