- 浏览: 13731096 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (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 1236使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2339当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1221参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1062在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 995从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1597先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3351每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1252原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4515出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1387一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1603一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 863域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2323代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 766代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1646插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 548上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1229javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3628寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1165AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 736AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
**jQuery 自动完成 Autocomplete 知识点详解** jQuery 的 Autocomplete 是一个强大的插件,它为用户在输入框中输入内容时提供实时的建议或匹配项,极大地提高了用户体验。这个功能广泛应用于搜索框、表单填充等场景...
**jQuery自动完成插件Autocomplete** jQuery的Autocomplete插件是一种强大的交互功能,它允许用户在输入时获得建议或预填充的搜索项。这个插件是基于jQuery库的,因此可以轻松地集成到任何HTML页面中,以提高用户...
jQuery plugin for autocomplete - jQuery自动完成插件
在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete
`jquery.autocomplete.js`是jQuery的一个插件,它扩展了原生的jQuery库,增加了自动完成的功能。这个插件主要由两个核心部分组成:一个是前端展示部分,负责渲染和展示联想结果;另一个是数据处理部分,用于获取和...
除了这些基本参数,jQuery UI Autocomplete还提供了许多其他高级选项,如`create`事件(当Autocomplete初始化完成时触发)、`response`事件(当数据源返回响应时触发)等。通过熟练掌握这些参数,开发者可以根据具体...
jQuery Autocomplete 是一个非常流行的前端开发插件,它为输入框提供了自动完成的功能,极大地提升了用户在网页上的交互体验。这个插件基于JavaScript库jQuery构建,允许开发者轻松地创建搜索建议、动态填充表单等...
jQuery UI Autocomplete是一款基于jQuery UI库的插件,专门用于实现自动完成功能。这个组件在网页表单中尤其有用,它可以为用户提供实时的搜索建议,提升用户输入体验,节省用户时间并减少输入错误。在网页应用中,...
在本文中,我们将深入探讨如何使用jQuery的Autocomplete插件来实现一个动态的、基于Ajax的自动完成功能。这个功能常用于输入框,当用户输入时,它会根据已有的数据提供匹配的建议,极大地提高了用户体验。我们将讨论...
而jQuery Autocomplete插件则是一个非常实用的工具,它能够帮助用户在输入框中实现自动补全功能,提高用户体验。虽然jQuery UI库中也有一个Autocomplete组件,但这里我们讨论的是一个独立且简单的jQuery ...
jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为网页表单输入框提供了强大的自动完成或自动补全功能。这个插件极大地提升了用户在输入搜索关键词或填写数据时的体验,使得用户可以快速找到并选择所需的内容...
标题中的“jquery自动完成输入框”指的是使用jQuery库实现的Autocomplete功能,这是一种常见的前端UI交互设计,用于提升用户在输入框中输入信息时的效率和体验。它会在用户输入时提供匹配的建议列表,常见于搜索框、...