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

百变鹏仔 2天前 #PHP

文章标签如何用

实现类似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）和一个预定义的选项列表 availabletags。当用户在控件中输入字符时，自动提示插件会过滤选项列表，并显示与输入匹配的选项。

文章推荐

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

PHP 函数中如何使用递归来求最小公倍数？

PHP 函数中使用引用的高级技巧和用法

PHP 函数中引用传递与函数调用栈的关系

PHP 函数中引用传递的深浅拷贝问题

PHP 函数中如何使用递归来实现深度优先搜索？