如何用jQuery实现类似谷歌搜索的自动提示功能？

实现类似google suggest的功能

问题：

如何实现类似搜索框的自动提示功能？

回答：

可以使用 [jquery ui 自动提示](http://jqueryui.com/autocomplete/) 来实现此功能。

该插件为 控件提供自动完成功能。它从预定义的选项列表中提取匹配建议，并将其显示在一个弹出菜单中。

以下是使用该插件的一个代码示例：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">tags:</label>
  <input id="tags">
</div>

登录后复制

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});

登录后复制

在这个例子中，我们设置了一个 input 控件（#tags）和一个预定义的选项列表 avlabletags。当用户在控件中输入字符时，自动提示插件会过滤选项列表，并显示与输入匹配的选项。

以上就是如何用jQuery实现类似搜索的自动提示功能？的详细内容，