jQuery UI 自动完成搜索()方法(1)

📌 相关文章

📜 jQuery UI 自动完成搜索()方法(1)

📅 最后修改于: 2023-12-03 15:02:12.863000 🧑 作者: Mango

jQuery UI 自动完成搜索()方法

jQuery UI 自动完成搜索()方法是一种使输入框变成可自动完成的方法。用户在输入框中输入一些字符时，自动完成搜索()方法会向服务器发出一个 AJAX 请求，然后返回匹配的数据并将其提供给用户选择。

用法

首先，我们需要包含 jQuery UI 库和 jQuery 库。这可以通过以下方式完成：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

接下来，我们可以将我们的输入框转换为自动完成输入框：

<input type="text" id="myInput">

然后，我们需要编写一个 AJAX 请求以获取匹配的数据。在这个例子中，我们将使用 PHP：

<?php
  $searchTerm = $_GET['term'];

  $conn = new mysqli('localhost', 'root', 'password', 'database');
  
  $sql = "SELECT title FROM books WHERE title LIKE '%$searchTerm%'";
  $result = $conn->query($sql);
  
  $books = array();
  
  while($row = $result->fetch_assoc()) {
    $books[] = $row['title'];
  }

  echo json_encode($books);
?>

最后，我们需要将自动完成输入框初始化：

$(document).ready(function() {
  $("#myInput").autocomplete({
    source: "search.php",
    minLength: 2
  });
});

将 'myInput' 替换为您的实际输入框的 ID，将 'search.php' 替换为您的 AJAX 请求的 URL。

参数说明

自动完成搜索()方法有几个参数，下面是一些常用的参数：

source：指向您的 AJAX 请求的 URL。这必须返回 JSON 数据。
minLength：默认情况下，至少输入 1 个字符才会出现自动完成建议。将这个值设为 2 可以更好地筛选结果。
select：当用户从自动完成列表中选择一个建议时，调用一个回调函数。可以在这里执行某些操作，例如导航到所选项。

示例

以下是一个使用自动完成搜索()方法的完整示例：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(document).ready(function() {
        $("#myInput").autocomplete({
          source: "search.php",
          minLength: 2
        });
      });
    </script>
  </head>
  <body>
    <label for="myInput">Search: </label>
    <input type="text" id="myInput">
  </body>
</html>

示例中所需的 jQuery UI 自动完成搜索()方法的完整代码片段，可以在官方文档中获得。