`
yulon
  • 浏览: 118276 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery-autocomplete 详解(转)

阅读更多

基于jquery的autoComplete插件网上有很多,搞得都不知道用哪个好。

试了一下这个,还不错:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

第一步:了解相关依赖

* jQuery
* bgiframe plugin
* dimensions plugin, only offset method is used

第二步:提供数据

这个插件的接口autoComplete可以接收一个数组或者一个远程URL作为参数以提供数据.

Array 用数组会比较直接,性能比较好,当然效果也会比较好

URL 一般是用ajax去取数据了,但是服务器端脚本要提供相应格式的数据.至于在SGL内如何应用的详细细节我会在下一篇中详细解释.

第三步:autoComplete接口相关配置选项的解释

简单的我就不介绍了,介绍一些常用的,其它的自己参考文档

* minChars (Number): 在触发autoComplete前用户至少需要输入的字符数.Default: 1

* delay (Number): 击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10

* cacheLength (Number): 缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10

* matchSubset (Boolean): autoComplete可不可以使用对服务器查询的缓存,作者举了个例子是如果缓存对foo的查询结果,那么如果用户输入foot就不需要再进行检索了,直接使用缓存,好处多多啊.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true

* matchCase (Boolean): 比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false

* matchContains (Boolean): 决定是比较时是否要比较字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false

* mustMatch (Booolean): 如果设置为true,autoComplete只会允许匹配的结果出现在结果时,所有当用户输入的是非法字符时将会得不到下拉框.Default: false

* extraParams (Object): 为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}

* selectFirst (Boolean): 如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true

* formatItem (Function): 首先要明白这个选项的值是一个函数的句柄或指针.函数的作用是为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数: 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.

* formatResult (Function): 和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

* multiple (Boolean): 是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false

* multipleSeparator (String): 如果是多选时,用来分开各个选择的字符. Default: “,“

* width (Number): 指定下拉框的宽度. Default: input元素的宽度

* autoFill (Boolean): 要不要在用户选择时要不要自动将用户当前鼠标所在的值填入到input框.并在用户继续输入 Default: false

* max (Number): autoComplete下拉显示项目的个数.Default: 10

分享到:
评论

相关推荐

    jQuery-autoComplete-1.8.22代码例子

    《jQuery-autoComplete-1.8.22代码详解与应用》 jQuery-autoComplete是一款非常实用的前端插件,主要用于实现输入框的自动补全功能,它极大地提升了用户体验,尤其是在处理大量数据时,使得用户能够快速找到所需...

    jQuery-Autocomplete-exaples.rar

    **jQuery Autocomplete 插件详解** jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为文本输入框提供了自动补全功能,极大地提升了用户体验。在 Web 应用中,尤其是在需要用户输入搜索关键词或选择特定项时...

    jquery-autocomplete 自动完成

    **jQuery Autocomplete 插件详解** jQuery Autocomplete 是一个非常流行的前端开发插件,它为输入框提供了自动完成的功能,极大地提升了用户在网页上的交互体验。这个插件基于JavaScript库jQuery构建,允许开发者...

    jquery插件-autocomplete

    **jQuery Autocomplete插件详解** 在前端开发中,jQuery库为我们提供了丰富的功能和简便的API,使得网页交互变得更加便捷。而jQuery Autocomplete插件则是一个非常实用的工具,它能够帮助用户在输入框中实现自动...

    jquery-autocomplete

    **jQuery Autocomplete 插件详解** jQuery Autocomplete 是一个非常流行的前端开发插件,它能够为输入框提供自动补全功能,极大地提升了用户在网页上的交互体验。该插件基于JavaScript库jQuery,允许开发者轻松地为...

    jquery-autocomplete文档

    ### jQuery Autocomplete 插件详解 #### 一、概述 jQuery Autocomplete插件是一个非常实用且功能丰富的jQuery扩展,主要用于实现网页表单中输入框的自动补全功能。该插件能够极大地提升用户体验,使用户在输入数据...

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

    《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI ...

    jquery-autocomplete 智能提示

    **jQuery Autocomplete 知识详解** `jQuery Autocomplete` 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全的功能,适用于各种 Web 应用中的搜索、填充表单等场景。这个插件能够根据用户输入的部分字符,...

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

    《jQuery Autocomplete 智能联想框JS实现详解》 在网页开发中,为了提高用户体验,经常需要使用到一种功能——智能联想框。这个功能可以让用户在输入框中输入文字时,自动显示与输入内容相关的建议,就像百度搜索...

    前端项目-jquery-autocomplete.zip

    **jQuery AutoComplete 插件详解** 前端开发中,用户输入的自动补全功能是一个常见的需求,它可以提升用户体验,使得用户能够快速找到并选择所需的信息。`jQuery AutoComplete` 是一个基于 jQuery 的轻量级插件,它...

    jQuery-Autocomplete-master

    《jQuery Autocomplete 实现文本自动填充详解》 在网页开发中,为了提高用户体验,经常会用到文本自动填充功能,这可以极大地简化用户输入,减少错误。jQuery Autocomplete 是一款非常实用的插件,用于实现这一功能...

    jquery -autocomplete(jquery 自动补全)

    **jQuery Autocomplete 知识详解** `jQuery UI` 的 `Autocomplete` 插件是一款强大的自动补全功能组件,它为用户在输入框中输入文本时提供实时的建议列表,极大地提高了用户界面的交互性和效率。这个插件是基于流行...

    jquery-autocomplete示例

    **jQuery Autocomplete 知识点详解** jQuery Autocomplete 是一个非常实用的JavaScript插件,它为HTML表单输入框提供自动补全功能,极大地提升了用户体验。这个插件是基于广泛使用的jQuery库构建的,因此在各种项目...

    Jquery AutoComplete 使用demo

    **jQuery AutoComplete 知识点详解** jQuery AutoComplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动补全的功能,广泛应用于网页表单、搜索框等场景,以提高用户体验。这个插件允许开发者从本地数组或...

    jquery autocomplete下载.rar

    《jQuery Autocomplete 全面解析》 jQuery Autocomplete 是一个非常实用的插件,它为网页表单输入框提供了自动补全功能,极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需...

    jquery-ui-1.8.18.custom,jquery-ui-1.8.18.custom.min,jquery-1.7.1.min

    《jQuery UI 1.8.18 自定义版本详解及应用》 jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集,它提供了一系列可交互的组件,用于创建丰富的用户体验。在标题提及的 "jquery-ui-1.8.18.custom" 文件中...

    jquery-ui插件

    **jQuery UI插件详解** jQuery UI是一个基于JavaScript的开源库,它是jQuery库的扩展,提供了丰富的用户界面组件和交互效果。这个插件以其强大的功能、易于使用的API和可定制的主题而受到开发者的广泛欢迎。在本文...

    jquery.autocomplete.js使用示例,可直接运行

    **jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...

    jquery-ui-1.10.4

    5. **Autocomplete(自动完成)**:此组件能够为输入框提供动态的建议列表,提高用户输入效率,常用于搜索框、地址输入等。 6. **Accordion(折叠面板)**:允许将多个内容区域组织成可折叠的面板,节省页面空间,...

Global site tag (gtag.js) - Google Analytics