`

两款juqery autocomplete 使用总结

阅读更多
   近日得到一个任务:调研“输入提示”js plugin,并集成到项目中去。我对jquery-ui-autocomplete 和 jquery-autocomplete 都做了简单的技术调研,发现了一些问题,有了一些心得。
   jquery-autocomplete git-address:https://github.com/devbridge/jQuery-Autocomplete
  


   该开发者出了两版,我下载的最新版,demo中是基于jquery-1.8.2.min.js的,支持最低的jquery 版本是1.27,并且仅依赖jquery核心js。这款jquery.autocomplete.js options有几个重要属性。
   1)lookupFilter 可以添加一个对source 结果过滤规则。
   2)zindex 设置自动提示div的显示层级
   3)noCache 是否缓存查询结果
   4)匹配内容在提示内容中高亮显示
   5) 双端匹配(%xxx%)
   该款autocomplete js 完美支持中文录入提示,但是 source对于非key value 数组支持不够好,例如source:['aaa','bbb','ccc'] 需要对该source重新处理成[key1:value1,key2:value2] 的数据格式。该js对同key做了覆盖处理,后面相同的key会覆盖掉前面的数据,提示匹配只会匹配后面key对应的value.
  


   jquery-ui autocomplete  url:http://jqueryui.com/autocomplete/ .
  


   该款输入提示js需依赖jquery.ui.core.js ,jquery.ui.widget.js jquery.ui.position.js 。
   1)该款自动提示plugin是基于widget ,提供基础的api ,不做赘述.
   2)匹配模式为单端匹配(%xxx)。
  
   该插件jquery-ui 1.8.16 版本的autocomplete 无法检测首次中文输入事件,无法提示自动补全内容。对于英文输入提示,没有发现任何问题。
    对于1.8.16 输入中文不触发autocomplete 接解决办法,是追加一个input事件,当listen到输入时,触发autocomplete search数据。
"blur.autocomplete",
										function(c) {
											if (!a.options.disabled) { 
											    clearTimeout(a.searching); 
											    a.closing = setTimeout(function () { 
											    a.close(c); 
											    a._change(c) 
										               }, 150) 
											} 
										}).bind('input',function (c) { 
										      a.search(a.item); 
										});




总结:jquery-autocomplete依赖较少,如果单存想添加输入提示功能,它是个不错的选择,支持cache,支持中文提示,代码体积很小,在dialog 层级较多的前提下,提示div依然不会被覆盖,这个也得意于zindex 支持。
     jquery-ui autocomplete 依赖较多,所以会引入一些不必要的代码,弹出层级较多时,zindex 无法灵活控制,默认每次输入会自动search后台数据,对server压力较多一些。,但是如果web前端是基于jquery-ui的实现,那么直接利用jquery-ui autocomplete 实现输入提示,个人认为是最合适的,因为引入其他的提示plugin,需要解决js冲突。
2
0
分享到:
评论
1 楼 代昊鑫 2013-07-08  
赞一个,博主总结的很到位,在jquery-ui autocomplete的使用过程中,个人遇到的问题比较多,个人更喜欢jquery-autocomplete

相关推荐

    jquery autocomplete 动态补全例子有说明ajax加载

    jQuery Autocomplete是一款非常实用的JavaScript插件,它允许用户在输入框中输入文字时,根据已有的数据集动态提供补全建议。这个功能在许多Web应用中被广泛使用,如搜索框、表单输入等。在给定的“jquery ...

    jQuery:AutoComplete使用指南

    jQuery AutoComplete插件作为一款轻量级且易于集成的工具,能够帮助开发者轻松地在自己的项目中实现这一功能。本文档旨在详细介绍jQuery AutoComplete插件的安装、配置及其各项参数的使用方法。 #### 二、安装与...

    jquery Autocomplete 仿百度搜索 只能搜索提示

    总结来说,"jQuery Autocomplete 仿百度搜索 只能搜索提示"是一个基于jQuery UI和ASP.NET的实时搜索提示系统,它通过前后端的配合,实现了类似百度和Google搜索的自动补全功能。这个项目不仅提供了代码实现,还包含...

    jquery autocomplete js 文件

    **jQuery Autocomplete 知识点详解**...总结,jQuery Autocomplete 是一个强大且灵活的工具,可以帮助开发者轻松实现输入提示功能。通过理解其工作原理、配置选项和事件机制,你可以根据需求构建出符合预期的搜索体验。

    Jquery AutoComplete

    要使用 `jQuery AutoComplete`,首先需要在页面中引入 jQuery 和 jQuery UI(包括 `ui.core.js` 和 `ui.autocomplete.js`)。然后,通过 jQuery 选择器找到目标输入框,调用 `autocomplete` 方法并传入配置参数: `...

    jquery自动补全插件(jquery autocomplete)

    **jQuery AutoComplete ...总结,jQuery AutoComplete 插件通过简单的配置和使用,可以实现强大的自动补全功能,提高用户体验。结合前端与后端接口,可以构建出高效的动态搜索功能。希望这个插件能为你的项目带来便利。

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

    首先,我们需要引入jQuery库和jQuery UI库,这两个库是使用Autocomplete插件的基础。在HTML文件中,确保引入了以下两个链接: ```html <script src="https://code.jquery.com/jquery.js"></script> ...

    带数据库的 jquery-autocomplete-php

    【标题】"带数据库的 jquery-autocomplete-php" 涉及到的是一个使用jQuery库实现的自动补全功能,结合PHP和MySQL数据库来提供动态搜索建议。jQuery UI的Autocomplete插件是这个功能的核心,它允许用户在输入框中输入...

    jQuery autocomplete 自动加载

    jQuery Autocomplete是一款非常实用的插件,用于在输入框中实现自动补全功能。这个功能在许多网站上广泛使用,例如搜索引擎、电子商务网站的商品搜索、社交媒体的用户名提示等。jQuery库的强大结合Autocomplete插件...

    jquery.autocomplete.js

    总结来说,jQuery Autocomplete插件是提升用户体验、简化前端开发的强大工具。借助其跨浏览器兼容性、丰富的配置选项和灵活的数据获取方式,我们可以构建出各种各样的智能输入解决方案。只要合理运用,这个插件无疑...

    jquery autocomplete下载.rar

    总结,jQuery Autocomplete是一个强大且灵活的前端组件,能够轻松地为网站增加智能提示功能。通过理解和掌握其使用方法,开发者可以为用户提供更加友好和高效的交互体验,提升网站的整体质量。在实际项目中,结合...

    jquery autocomplete

    总结,jQuery Autocomplete是实现自动补全功能的理想选择,其简单易用且功能强大。通过灵活配置和定制,我们可以为用户提供更加智能化、个性化的交互体验。理解并熟练运用jQuery Autocomplete,将使我们的Web应用更...

    jquery.autocomplete.zip

    总结,`jQuery.autocomplete`是一个强大且易用的自动提示插件,它极大地简化了在网页中实现自动提示功能的工作,提升了用户体验。开发者可以根据自己的需求灵活配置和扩展,使其更好地适应各种应用场景。

    jquery autocomplete 控件

    总结,jQuery Autocomplete 是一个强大且灵活的前端工具,它使网页表单输入更加便捷,提高了用户体验。理解其工作原理和配置选项,能够帮助开发者有效地实现自动补全功能,并在项目中发挥出其最大的价值。

    jQuery-Autocomplete-exaples.rar

    **jQuery Autocomplete ...总结,jQuery Autocomplete 是一个强大且灵活的工具,它能够轻松地添加自动补全功能到网页中的文本输入框。理解并熟练使用其参数属性,能够帮助开发者构建出高效、用户体验优秀的 Web 应用。

    jquery 自动完成 Autocomplete

    总结,jQuery Autocomplete是一个强大的工具,通过它可以轻松实现高效的用户输入建议。灵活的数据源配置、丰富的自定义选项以及Ajax集成,使得这个功能在各种项目中都能发挥重要作用。正确理解和使用这个插件,能够...

    jquery autocomplete demo

    总结,jQuery Autocomplete是一个强大且灵活的组件,通过合理的配置和扩展,可以在各种场景下提供优秀的用户体验。无论是简单的本地数据源,还是复杂的远程API,它都能轻松应对,是构建交互式Web应用不可或缺的一...

    Jquery Autocomplete

    在实际项目中,jQuery Autocomplete 可以与后端框架(如 Django、Rails、Node.js 等)配合使用,提供动态的搜索建议。同时,它也可以与其他 jQuery UI 组件结合,构建出更加复杂和美观的用户界面。 ### 总结 ...

Global site tag (gtag.js) - Google Analytics