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

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《如何用jQuery实现类似谷歌搜索的自动提示功能？》，涉及到，有需要的可以收藏一下

实现类似google suggest的功能

问题：

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

回答：

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

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

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

<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>
  &lt;input id=&quot;tags&quot;&gt;
</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）和一个预定义的选项列表 availabletags。当用户在控件中输入字符时，自动提示插件会过滤选项列表，并显示与输入匹配的选项。

今天关于《如何用jQuery实现类似谷歌搜索的自动提示功能？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！