JQuery UI 使用 json 和 ajax 自动完成

JS

使用 JSON 和 Ajax 实现自动完成是一种常见的 Web 开发技术。这种技术可以帮助用户在输入框中输入关键字时，自动显示匹配的选项。这对于大型数据库或数据集的搜索和过滤非常有用。在本文中，我们将介绍如何使用 JQuery UI、JSON 和 Ajax 来实现自动完成功能，并提供一个案例代码供参考。

什么是自动完成

自动完成是一种用户界面设计技术，可以在用户输入关键字时，自动显示与之匹配的选项。这个功能通常用于搜索框或表单中，以提供更快速、更方便的输入体验。自动完成可以通过在服务器上进行搜索并返回匹配的结果，或者通过在客户端使用预加载的数据集来实现。在本文中，我们将重点介绍使用 JSON 和 Ajax 来实现自动完成的方法。

使用 JQuery UI 实现自动完成

JQuery UI 是一个功能强大的 JavaScript 库，提供了许多用户界面组件和交互效果。其中之一就是自动完成组件（Autocomplete），它可以帮助我们轻松地实现自动完成功能。下面是一个简单的示例代码，演示了如何使用 JQuery UI 的自动完成组件：

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.CSS">
  <script src="https://code.jquery.com/jquery-3.5.1.min.JS"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.JS"></script>
</head>
<body>
  <label for="search">搜索：</label>
  <input type="text" id="search">
  <script>
    $( function() {
      var avAIlableTags = [
        "苹果",
        "香蕉",
        "橙子",
        "葡萄",
        "西瓜",
        "樱桃"
      ];
      $( "#search" ).autocomplete({
        source: avAIlableTags
      });
    } );
  </script>
</body>
</html>

在上面的代码中，我们首先引入了 JQuery 和 JQuery UI 的库文件。然后创建一个输入框和一个标签，用于显示搜索结果。接着，我们定义了一个包含一些水果名称的数组 avAIlableTags，作为自动完成的候选项。最后，我们调用了 autocomplete() 方法，并将 avAIlableTags 数组作为参数传入，以启用自动完成功能。

使用 JSON 和 Ajax 获取自动完成数据

在上面的例子中，我们使用了一个静态的数组作为自动完成的数据源。然而，在实际情况下，我们通常需要从服务器动态获取数据。这时，我们可以使用 JSON 和 Ajax 来实现。

下面是一个示例代码，演示了如何使用 Ajax 和 JSON 来获取自动完成的数据：

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.CSS">
  <script src="https://code.jquery.com/jquery-3.5.1.min.JS"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.JS"></script>
</head>
<body>
  <label for="search">搜索：</label>
  <input type="text" id="search">
  <script>
    $( function() {
      $( "#search" ).autocomplete({
        source: function( request, response ) {
          $.Ajax( {
            url: "search.php",
            dataType: "JSon",
            data: {
              term: request.term
            },
            success: function( data ) {
              response( data );
            }
          } );
        },
        minLength: 2
      } );
    } );
  </script>
</body>
</html>

在上述代码中，我们使用了一个名为 search.php 的服务器端脚本来处理自动完成的搜索请求。当用户在输入框中输入至少两个字符时，会触发自动完成的搜索请求。服务器端脚本会根据用户的输入进行搜索，并返回一个 JSON 格式的数据。

在客户端，我们使用了 JQuery 的 $.Ajax() 方法来发送异步请求。我们指定了请求的 URL、数据类型和要发送的数据。当服务器返回数据时，我们使用 response() 方法将数据传递给自动完成组件。

自动完成是一种非常实用的 Web 开发技术，可以提供更好的用户体验。本文介绍了如何使用 JQuery UI、JSON 和 Ajax 来实现自动完成功能。我们提供了一个简单的示例代码，演示了如何使用静态数据和动态数据来实现自动完成。希望本文能帮助读者理解和应用自动完成技术。