本站资源收集于互联网,不提供软件存储服务,每天免费更新优质的软件以及学习资源!

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

网络教程 app 1℃

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

实现类似google suggest的功能

问题:

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

回答:

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

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

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

<link rel="stylesheet" href="//code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css"><script src="//code.jquery./jquery-1.10.2.js"></script><script src="//code.jquery./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" ).autoplete({ source: availableTags });});

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

以上就是如何用jQuery实现类似谷歌搜索的自动提示功能?的详细内容,更多请关注范的资源库其它相关文章!

转载请注明:范的资源库 » 如何用jQuery实现类似谷歌搜索的自动提示功能?

喜欢 (0)