`
天梯梦
  • 浏览: 13640844 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

jquery 自动完成 Autocomplete

阅读更多

1. jQuery Autocomplete Mod

 

jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。

 

 

2. AutoComplete-JQuery

 

jQuery插件易于集成到现在的表单中(Form)。

 

 

3. Autocomplete-jQuery ajax

 

利用jQuery(Ajax),PHP和MySQL开发的AutoCompleter。

 

主页:http://nodstrum.com/2007/09/19/autocompleter/
下载:http://nodstrum.com/wp-content/plugins/DownloadCounter/download.php?id=26
DEMO:http://nodstrum.com/wp-content/plugins/DownloadCounter/download.php?id=25

 

 

4. Facebook like Autocomplete

 

基于jQuery开发,类似于FaceBoox提供的AutoCompleter。

 

主页:http://web2ajax.fr/examples/facebook_searchengine/
下载:http://web2ajax.fr/examples/facebook_searchengine/
DEMO:http://web2ajax.fr/examples/facebook_searchengine/

 

 

5. jQuery Tag Suggestion

 

类似于del.icio.us提供的tag suggesting功能。

 

 

6. jqac

 

基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。

 

主页:http://code.google.com/p/jqac/
下载:http://jqac.googlecode.com/files/jquery.autocomplete-1.4.2.js
DEMO:http://www.cs.bgu.ac.il/~ygleyzer/files/utils/jqac/jqac_example.html

 

 

7. jQuery Live Ajax Search Plug-in

 

采用jQuery开发的AutoComplete控件。搜索结果展示框完全可以利用CSS自定义,内容展示是一个HTML页面。

 

 

8. ddcombobox

 

带AutoComplete功能的下拉选择框jQuery插件。

 

主页:http://simpletutorials.com/?path=tutorials/javascript/jquery/ddcombobox
下载:http://simpletutorials.com/tutorials/javascript/jquery/ddcombobox/jquery.ddcombobox.zip
DEMO:http://simpletutorials.com/?path=tutorials/javascript/jquery/ddcombobox

 

 

9.  jSuggest

 

模仿Google Suggest功能的AutoComplete jQuery插件。

 

 

10. jQuery plugin- Autocomplete

 

自动完成输入框值让用户能够快速查找和过滤某些值。

 

主页:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
下载:http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
DEMO:http://jquery.bassistance.de/autocomplete/demo/

 

 

11.  A fancy Apple.com-style search suggestion

 

这是一个使用HTML/CSS,jQuery,MySQL+PHP等技术实现的Search Suggestion。

 

主页:http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html
下载:http://downloads.marcofolio.net/programming/webdesign/apple.com-style_suggestion_search.zip
DEMO:http://qpoit.com/marcofolio_demo/apple_search/

 

 

12. jQuery.Suggest

 

跨浏览器支持,基于jQuery开发的Autocomplete library。

 

主页:http://www.vulgarisoip.com/2007/08/06/jquerysuggest-11/
下载:http://www.vulgarisoip.com/files/jquery.suggest.js
DEMO:http://www.vulgarisoip.com/2007/08/06/jquerysuggest-11/

 

 

13.  jquery.ajaxComboBox.js

 

一个高级AJAX ComboBox控制,提供多种功能包括下拉选项分页,输入值自动过滤,鼠标移过下拉选项显示Tooltips。

 

 

14. Tokenizing Autocomplete Text Entry

 

一个jQuery插件能够让用户从一个预设的列表中,选择多个项目。并提供Autocompletion功能来帮助用户搜索项目。支持通过CSS控制和定 制布局。能够缓存搜索结果减少服务器加载次数。支持用鼠标或键盘来选择项目。提供平滑的动画数据加载效果。

 

主页:http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/
下载:http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/
DEMO:http://loopj.com/jquery-tokeninput/demo.html

 

 

另外添加了两个与php后台交互的例子:

见附件: ajax-autocomplete.zip 和  dyve-jquery-autocomplete.zip

 

 

 

分享到:
评论
6 楼 autosuggestion 2017-06-23  
[color=red]搜索框对一个网站信息传送非常重要,简直就是个跨空间的传送门!
可是一个孤零零、没有提示的搜索框,反而给用户带来无助感:很多时候用户不知道要输入些什么
为什么不能像baidu、淘宝、google那样,给搜索框添加一个自动提示(自动补全)功能呢,
对用户而言,可以有效降低输入成本,获得更多提示,快速了解网站的优质资源
对站长而言,可以优先推送网站的优质关键信息,等于多了一个广告位,更多的展示网站优先推荐的内容。
最近做了一个搜索项目,
发现很多用户会偷懒,直接输入拼音、拼音首字母、某个词汇去进行搜索,
在此情况下,
为网站的搜索框安装一个类似百度、google那样的搜索提示、补全功能。
要求系统能快速响应用户的搜索需求;
同时还发现,不同的用户对同一个词条(标题)的提示排序顺序,有不同要求,
比如输入jd,高校图书馆用户希望《基督山伯爵》排在前面,《京东疯狂大减价》(我YY的)排在后面,
如果是电商,正好相反,对电商而言,不同销售季节,希望搜索提示出词条的排序也是不同的。
我发现在网上找个关于搜索框(input标签)自动提示的JS插件很容易,一大堆供你挑选,
但是,要想实现拼音、拼音首字母匹配、模糊匹配、智能容错、自定义提示词条自主排序等等这些功能,
是非常琐碎非常麻烦的,
更麻烦的是,我的数据在50万条左右,要想前端用户输入之后有较快(延时小于100ms)的响应,
还需要在前端加一层cache,memocache 、redis试了个遍。
网上的智能提示JS插件,都仅仅是一个前端界面,要实现自动提示,最大困难的是后端实现
92find做一个这样的JS插件:
把前面提到那些功能都封装起来,放在一台云服务器上,
开发者每次需要使用自动提示这个功能时,
只需准备好要提示的词条列表或者标题列表,及其排序的优先级,
向云服务器提交这些数据,服务自动生成前面提到的各种索引(前缀、拼音、容错),
并且自动分发到一个cache中,
开发者只需在自己的H5页面(或者普通HTML页面)中引用一行JS代码,
就可以通过跨域的方式使用自动提示的数据了,
不再需要配置什么数据库,也不需要写一行后台的java/php代码
只需5分钟 和一个txt文本,
自己的搜索框提示功能就上线了,同baidu、淘宝一样强大。
我把这个功能安装在了国内几家211、985大学的网站上
项目网站www.92find.com
[/color]
5 楼 autosuggestion 2017-06-23  
实现一个智能提示功能需要JavaScript、ajax、数据库、jsp/php很多知识,
如果数据量大还需要特殊优化,一个小功能,花费太大精力不合适

但这是个可有可无的功能吗,肯定不是
对用户而言,可以有效降低输入成本,在面对输入框时,获得更多提示,不用那么迷茫和无助
对站长而言,可以优先推送网站的关键信息,等于多了一个广告位。


92find高校用户案例

一所大学图书馆的搜索框智能提示,大约50万个词条(书名)
他们使用的是www.92find.com的搜索框智能提示免费产品,
只要一行javascript代码,就可以实现baidu、淘宝搜索框提示的全部功能
比如:拼音匹配、拼音首字母匹配、模糊搜索、智能容错,
还可以自定义提示词汇及其排序权重
你只需要准备好自己的提示词汇表就可以了,
无需编写程序,
五分钟(真的是5分钟)就可以在线配置拥有
主流搜索引擎都有的自动提示(自动补全)功能
4 楼 天梯梦 2012-01-06  
w156445045 写道
没怎么找到跟后台交互的例子呢~

最后两个例子为与php后台的交互例子
3 楼 天梯梦 2011-10-19  
w156445045 写道
没怎么找到跟后台交互的例子呢~

这些其实都是可以跟后台交互啊, 你可以用ajax通过后台返回jquery的需要的数据。
2 楼 w156445045 2011-10-19  
没怎么找到跟后台交互的例子呢~
1 楼 bushkarl 2010-08-12  

相关推荐

Global site tag (gtag.js) - Google Analytics