如何创建jQuery UI的自动完成功能

要创建jQuery UI的自动完成功能，我们可以使用以下步骤：

引入jQuery和jQuery UI库文件。
创建一个输入框元素，例如<input type="text" id="myInput">。
使用.autocomplete()函数初始化自动完成功能，例如$("#myInput").autocomplete(options)。
在options对象中设置自动完成功能的选项，例如source、minLength、select等。

以下是两个示例，演示如何创建jQuery UI的自动完成功能：

示例1：从本地数据源中获取自动完成功能

以下是一个示例，演示如何从本地数据源中获取自动完成功能：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Autocomplete Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <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>
  <script>
    $(document).ready(function() {
      var data = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
      $("#myInput").autocomplete({
        source: data,
        minLength: 2,
        select: function(event, ui) {
          alert("You selected: " + ui.item.value);
        }
      });
    });
  </script>
</head>
<body>
  <input type="text" id="myInput">
</body>
</html>

在这个示例中，我们使用$("#myInput").autocomplete()函数初始化了自动完成功能，并将数据源设置为一个包含多个字符串的数组。我们设置了minLength选项为2，以便在用户输入至少两个字符后才显示自动完成功能。我们使用select选项设置了一个回调函数，以便在用户选择一个选项时显示一个警报框。

示例2：从远程数据源中获取自动完成功能

以下是一个示例，演示如何从远程数据源中获取自动完成功能：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Autocomplete Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <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>
  <script>
    $(document).ready(function() {
      $("#myInput").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "https://api.github.com/search/repositories",
            dataType: "json",
            data: {
              q: request.term
            },
            success: function(data) {
              response($.map(data.items, function(item) {
                return {
                  label: item.name,
                  value: item.name
                };
              }));
            }
          });
        },
        minLength: 2,
        select: function(event, ui) {
          alert("You selected: " + ui.item.value);
        }
      });
    });
  </script>
</head>
<body>
  <input type="text" id="myInput">
</body>
</html>

在这个示例中，我们使用$("#myInput").autocomplete()函数初始化了自动完成功能，并将数据源设置为一个远程API。我们使用source选项设置了一个回调函数，该函数使用jQuery的$.ajax()函数从远程API获取数据。我们使用dataType选项设置了响应数据的类型为JSON。我们使用data选项设置了API请求的参数。我们使用success选项设置了一个回调函数，该函数将API响应数据转换为一个包含label和value属性的对象数组。我们设置了minLength选项为2，以便在用户输入至少两个字符后才显示自动完成功能。我们使用select选项设置了一个回调函数，以便在用户选择一个选项时显示一个警报框。

综上所述，我们可以使用上述步骤和示例创建jQuery UI的自动完成功能，并根据需要设置它们的选项和回调函数。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何创建jQuery UI的自动完成功能 - Python技术站

如何创建jQuery UI的自动完成功能

示例1：从本地数据源中获取自动完成功能

示例2：从远程数据源中获取自动完成功能

相关文章