- 浏览: 13640844 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
1. jQuery Autocomplete Mod
2. AutoComplete-JQuery
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
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
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
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
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
- autoComplete_3.zip (19.1 KB)
- 下载次数: 393
- facebook_searchengine_4.zip (168.7 KB)
- 下载次数: 101
- jquery.autocomplete_2.zip (549.6 KB)
- 下载次数: 245
- jquery.ddcombobox_8.zip (49.5 KB)
- 下载次数: 77
- jquery.autocomplete_10.zip (549.6 KB)
- 下载次数: 302
- acbox_demo_13.zip (92.3 KB)
- 下载次数: 95
- apple.com-style_suggestion_search_11.zip (588.5 KB)
- 下载次数: 80
- search_14.rar (6.5 KB)
- 下载次数: 85
- dyve-jquery-autocomplete.zip (28.5 KB)
- 下载次数: 84
- ajax-autocomplete.zip (59.1 KB)
- 下载次数: 295
- jquery-tokeninput-1.6.0-0.zip (15.1 KB)
- 下载次数: 89
评论
可是一个孤零零、没有提示的搜索框,反而给用户带来无助感:很多时候用户不知道要输入些什么
为什么不能像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]
如果数据量大还需要特殊优化,一个小功能,花费太大精力不合适
但这是个可有可无的功能吗,肯定不是
对用户而言,可以有效降低输入成本,在面对输入框时,获得更多提示,不用那么迷茫和无助
对站长而言,可以优先推送网站的关键信息,等于多了一个广告位。
92find高校用户案例
一所大学图书馆的搜索框智能提示,大约50万个词条(书名)
他们使用的是www.92find.com的搜索框智能提示免费产品,
只要一行javascript代码,就可以实现baidu、淘宝搜索框提示的全部功能
比如:拼音匹配、拼音首字母匹配、模糊搜索、智能容错,
还可以自定义提示词汇及其排序权重
你只需要准备好自己的提示词汇表就可以了,
无需编写程序,
五分钟(真的是5分钟)就可以在线配置拥有
主流搜索引擎都有的自动提示(自动补全)功能
最后两个例子为与php后台的交互例子
这些其实都是可以跟后台交互啊, 你可以用ajax通过后台返回jquery的需要的数据。
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1184使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2264当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1176参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1017在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 947从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1553先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3304每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1204原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4462出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1341一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1559一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 824域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2279代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 718代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1594插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1182javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3575寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1104AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 696AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
JQUERY 自动完成autocomplete。 支持jquery1.3
jquery+json自动完成完整实例(修改版) 兼容各大浏览器,支持中文
jQuery plugin for autocomplete - jQuery自动完成插件
jQuery自动完成插件autocomplete.zip
jquery-autocomplete 自动完成插件
autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
利用ajax传值功能实现jquery自动完成.autocomplete 里面有代码详细解释说明,一看就懂。包括所有引入到的 7个js 全部都有
[ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大) 谁用谁知道
jquery autocomplete 自动完成 插件
jquery 文本框 自动补全 ajax autocomplete 完整实例
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
asp.net仿百度的自动完成(autoComplete) 使用Jquery autocomplete.js插件来完成自动完成,可以从数据库中读取数据 ajax异步显示数据!云计算QQ研究群:96191559
html5-autocomplete-suggestions插件实例包,是一个由HTML5与jQuery共同实现的表单输入自动完成的例子,当用户输入的时候,随着字符的输入,会自动匹配输入结果,以下拉的方式显示出匹配项,与百度搜索框的下拉提示...