`
天梯梦
  • 浏览: 13731096 次
  • 性别: 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  

相关推荐

    JQUERY 自动完成autocomplete

    **jQuery 自动完成 Autocomplete 知识点详解** jQuery 的 Autocomplete 是一个强大的插件,它为用户在输入框中输入内容时提供实时的建议或匹配项,极大地提高了用户体验。这个功能广泛应用于搜索框、表单填充等场景...

    jquery自动完成autocomplete,兼容各浏览器,支持中文

    **jQuery自动完成插件Autocomplete** jQuery的Autocomplete插件是一种强大的交互功能,它允许用户在输入时获得建议或预填充的搜索项。这个插件是基于jQuery库的,因此可以轻松地集成到任何HTML页面中,以提高用户...

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery自动完成插件autocomplete.zip

    在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...

    jquery Autocomplete插件,搜索自动完成

    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自动完成.zip

    autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete

    jquery.autocomplete.js资源压缩包下载

    `jquery.autocomplete.js`是jQuery的一个插件,它扩展了原生的jQuery库,增加了自动完成的功能。这个插件主要由两个核心部分组成:一个是前端展示部分,负责渲染和展示联想结果;另一个是数据处理部分,用于获取和...

    jquery-autocomplete 自动填充插件参数使用说明

    除了这些基本参数,jQuery UI Autocomplete还提供了许多其他高级选项,如`create`事件(当Autocomplete初始化完成时触发)、`response`事件(当数据源返回响应时触发)等。通过熟练掌握这些参数,开发者可以根据具体...

    jquery-autocomplete 自动完成

    jQuery Autocomplete 是一个非常流行的前端开发插件,它为输入框提供了自动完成的功能,极大地提升了用户在网页上的交互体验。这个插件基于JavaScript库jQuery构建,允许开发者轻松地创建搜索建议、动态填充表单等...

    jQuery UI Autocomplete是jQuery UI的自动完成组件

    jQuery UI Autocomplete是一款基于jQuery UI库的插件,专门用于实现自动完成功能。这个组件在网页表单中尤其有用,它可以为用户提供实时的搜索建议,提升用户输入体验,节省用户时间并减少输入错误。在网页应用中,...

    jquery自动完成.autocomplete

    在本文中,我们将深入探讨如何使用jQuery的Autocomplete插件来实现一个动态的、基于Ajax的自动完成功能。这个功能常用于输入框,当用户输入时,它会根据已有的数据提供匹配的建议,极大地提高了用户体验。我们将讨论...

    jquery插件-autocomplete

    而jQuery Autocomplete插件则是一个非常实用的工具,它能够帮助用户在输入框中实现自动补全功能,提高用户体验。虽然jQuery UI库中也有一个Autocomplete组件,但这里我们讨论的是一个独立且简单的jQuery ...

    [ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大)

    jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为网页表单输入框提供了强大的自动完成或自动补全功能。这个插件极大地提升了用户在输入搜索关键词或填写数据时的体验,使得用户可以快速找到并选择所需的内容...

    jquery自动完成输入框

    标题中的“jquery自动完成输入框”指的是使用jQuery库实现的Autocomplete功能,这是一种常见的前端UI交互设计,用于提升用户在输入框中输入信息时的效率和体验。它会在用户输入时提供匹配的建议列表,常见于搜索框、...

Global site tag (gtag.js) - Google Analytics