`
ltl3884
  • 浏览: 135388 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery的autoComplete 中文介绍

阅读更多

jquery autoComplete 介绍

jquery   2009-06-18 23:46   阅读822   评论0  
字号:    
   

基于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中文文档

    jquery-autocomplete搜索框自动完成的中文文档,上手快,轻便,功能强大

    Jquery Autocomplete 拼音首字母匹配

    1,本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现,解决了多音字匹配问题。 2,由于用了Linq查询,所以至少需要.NET Framework 3.5。 4,由于jquery匹配时的match项和result项来自不同...

    jquery autocomplete 完成控件中文修正

    jquery autocomplete.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...

    jQuery.Autocomplete 中文支持.pdf

    《jQuery.Autocomplete 中文支持》 jQuery.Autocomplete 是一款广泛使用的 jQuery 插件,它为网页中的输入框提供了自动完成(autocomplete)和建议提示(input suggest)功能。这款插件通过 AJAX 方式动态加载数据...

    java实现jquery.autocomplete自动搜索含中文

    用java实现autocomplete搜索功能,可以获取除输入框的其它动态参数,后台字符串拼接,返回json数据,格式如下: { query:'Li', suggestions:['Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania'...

    修复jQuery Autocomplete在FF中不支持中文的BUG

    《修复jQuery Autocomplete在Firefox中不支持中文的BUG详解》 在前端开发中,jQuery Autocomplete是一款非常实用的插件,它能为输入框提供自动补全功能,极大地提升了用户体验。然而,在某些情况下,尤其是在Fire...

    利用Jquery.AutoComplete插件及微软提供的ChineseConverter.dll实现汉字、拼音、简拼模糊搜索

    本教程将详细介绍如何结合Jquery.AutoComplete插件和微软的ChineseConverter.dll库,实现在网页上进行汉字、拼音和简拼的模糊搜索功能。 首先,Jquery.AutoComplete是jQuery UI库中的一个组件,它能为输入框添加...

    PHP jquery autocomplete实现

    首先,`jQuery Autocomplete`是jQuery UI库中的一个组件,它提供了基于输入内容实时提示的功能。在PHP环境中,我们可以利用它来后端处理数据检索,然后将匹配的结果发送回前端。要实现这个功能,我们需要遵循以下...

    Jquery AutoComplete firefox 中文 Ajax (option url or data) Jquery rails 自动完成

    **jQuery AutoComplete** 是一个非常流行的JavaScript库,用于在输入框中实现自动补全功能,它极大地提高了用户体验,尤其在需要用户输入关键字进行搜索或筛选的场景中。这个功能是基于jQuery框架构建的,因此可以...

    基于jQuery Autocomplete plugin 下开发的拼音下拉列表插件(2)

    对于基于jQuery Autocomplete的拼音下拉列表插件,其核心思路是在用户输入中文拼音时提供相应的汉字建议。实现这一功能需要对中文字符和拼音有深入的理解。开发者通常会依赖现有的中文转拼音库,如pinyin.js或zhon....

    jquery.autocomplete 增加自定义查询方法

    在本文中,我们将深入探讨如何在jQuery库的`autocomplete`插件中添加自定义查询方法。这个功能在很多场合都非常实用,特别是在用户输入时需要实时从服务器获取匹配数据的场景。`jquery.autocomplete`插件是jQuery的...

    jquery autocomplete combobox

    总的来说,这个jQuery Autocomplete Combobox的改进着重于增强跨浏览器的兼容性和中文匹配功能,使得用户在Firefox等浏览器中也能享受到便捷的输入体验。这对于开发多平台应用或者面向全球用户的网站来说,是至关...

    autocomplete汉字与拼音的双重查询

    本项目"autocomplete汉字与拼音的双重查询"特别关注了中文环境下的应用,不仅支持基于汉字的自动补全,还同时考虑了拼音的匹配,使得用户在输入汉字或拼音时都能得到准确的建议。 首先,我们要理解的是`...

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

    本文将深入探讨jQuery Autocomplete的实现原理、兼容性、中文支持以及如何与JSON数据源结合使用。 ### 1. 实现原理 jQuery Autocomplete主要通过监听用户在输入框中的输入事件,实时发送AJAX请求到服务器获取匹配...

    jquery.autocomplete

    《jQuery Autocomplete 实现中文自动补全功能详解》 在Web开发中,用户输入的便捷性和效率至关重要。jQuery Autocomplete插件为此提供了一个强大的解决方案,它允许开发人员为输入框添加实时的下拉建议功能,极大地...

    jquery.autocomplete.js 自动补全

    《jQuery autocomplete.js 实现中文自动补全功能详解》 在Web开发中,用户输入的便捷性和效率至关重要。为了提升用户体验,自动补全(AutoComplete)功能成为了一个不可或缺的元素,尤其是在处理大量数据输入时。...

    jQuery.Autocomplete 中文支持.docx

    《jQuery.Autocomplete 中文支持详解》 jQuery.Autocomplete 是一个广受欢迎的 jQuery 插件,它提供了输入框的自动完成和建议提示功能,极大地增强了用户体验。该插件允许通过 AJAX 方式动态加载数据,使得实时搜索...

    jquery autocomplete自动补全功能实现

    其中一个非常实用的功能就是jQuery的Autocomplete,这个功能为用户提供了自动补全输入的能力,大大提升了用户体验。本文将深入探讨如何利用jQuery实现自动补全功能,特别是针对邮箱、城市和中文的自动补全场景。 ...

    Jquery-autocomplete,自动提示,源代码,中文。

    **解决中文显示问题** 是jQuery Autocomplete的一个关键特性。由于JavaScript默认编码问题,中文字符在某些情况下可能无法正确显示。本压缩包中的源代码已经解决了这个问题,确保在自动提示列表中,中文可以正确无误...

    jquery.autocomplete的使用示例及说明文档

    **jQuery Autocomplete 插件详解** jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为输入框提供了自动完成的功能,可以极大地提升用户在输入时的效率和体验。这个插件适用于各种场景,如搜索框、表单填充等...

Global site tag (gtag.js) - Google Analytics