jQuery autocomplate 自扩展插件、自动完成示例代码

jQuery Autocomplete是一个非常实用的jQuery插件，它可以帮助我们在输入框中实现自动补全和提醒功能。同时，它还支持自定义扩展，因此可以按照需要进行灵活调整。

自定义扩展

Autocomplete提供了许多可自定义的扩展功能。下面是其中几项：

source

这个属性定义了来自哪个URL或数组中获取数据，jQuery Autocomplete会根据输入值在数据集中搜索最佳匹配项。

$( "#input" ).autocomplete({
  source: availableTutorials
});

minLength

下面示例指定了在至少键入2个字符后才会触发自动完成

$( "#input" ).autocomplete({
  minLength: 2
});

delay

在autocomplete开始搜索数据和填充下拉框之前，设置等待时间，以避免频繁请求，并提高性能。

$( "#input" ).autocomplete({
  delay: 500
});

select

下面示例使用select方法捕获当某个项被选中时的事件，并显示所选值。

$( "#input" ).autocomplete({
  select: function( event, ui ) {
    console.log( "Selected: " + ui.item.value + "， ID：" + ui.item.id );
  }
});

自动完成示例代码

现在，请看下面的两个自动完成示例代码，它们应该可以让你更好的了解该插件的使用方法。

示例1：自定义数据集

下面的示例定义自己的数据集，用于演示jQuery Autocomplete如何实现自动补全。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Autocomplete示例</title>
  <link rel="stylesheet" href="https://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 type="text/javascript">

    $( "#input" ).autocomplete({
      source: [
        "ActionScript",
        "AngularJS",
        "Aptana",
        "C++",
        "C#",
        "Cascading Style Sheets (CSS)",
        "Erlang",
        "Groovy",
        "HTML 5",
        "Java",
        "JavaScript",
        "Joomla",
        "jQuery",
        "Microsoft SQL Server",
        "MySQL",
        "Node.js",
        "Perl",
        "PHP",
        "PostgreSQL",
        "Python",
        "Ruby on Rails",
        "Swift",
        "TypeScript",
        "Visual Basic .NET (VB.NET)",
        "XHTML",
        "XML",
        "XSL"
      ]
    });

  </script>
</head>
<body>
  <label for="input">Programming languages:</label>
  <input id="input">
</body>
</html>

示例2：从服务器获取数据集

下面的示例说明如何从服务器获取数据集，用于演示jQuery Autocomplete如何实现自动补全。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Autocomplete示例</title>
  <link rel="stylesheet" href="https://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 type="text/javascript">

    $( "#input" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "url/to/get/data.php",
          dataType: "jsonp",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
      minLength: 2,
      select: function( event, ui ) {
        console.log( "Selected: " + ui.item.value + "， ID：" + ui.item.id );
      }
    });

  </script>
</head>
<body>
  <label for="input">Programming languages:</label>
  <input id="input">
</body>
</html>

这个示例使用了一个Ajax请求来从服务器获取数据集。然后，将JSONP数据返回给Autocomplete，以显示结果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery autocomplate 自扩展插件、自动完成示例代码 - Python技术站