`

jquery自动补全例子

阅读更多
jquery.autocomplete 自动补全插件例子,修改插件后还是比较Perfect的。

自己写的autocomplete例子,支持中英文.rar 为自己写的例子,备份下以后用到比较方便


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
分享到:
评论
3 楼 panghaoyu 2017-03-16  
实现一个智能提示功能需要ajax、数据库、jsp/php、算法等很多知识,
如果数据量大,还需要特殊优化
一个小功能,花费太大精力很不划算
我使用了92find.c-o-m的搜索框智能提示功能托管服务,
只要一行javascript代码就可以实现百度、淘宝搜索框提示的全部功能
比如:汉字拼音匹配、拼音前缀匹配、模糊搜索、智能容错,还可以自定义提示词汇及其排序权重
花五分钟我的网站就可以部署同百度、淘宝一样强大好用的输入提示功能
同时兼容IE、Firefox、Safari、Chrome、Opera各种浏览器
兼容ios、Android、Windows
2 楼 xieruilin 2014-07-29  
shengjun828 写道
给楼主提个问题,你能加上下拉列表功能吗??
即不输入任何字符的情况下,直接点开下拉列表选择内容

画个DIV就行啦,或者使用easyui的combobox
1 楼 shengjun828 2013-11-03  
给楼主提个问题,你能加上下拉列表功能吗??
即不输入任何字符的情况下,直接点开下拉列表选择内容

相关推荐

    jquery 自动补全例子

    首先,"jquery 自动补全 例子"是指使用jQuery库来创建一个自动补全的功能,这种功能通常用于在用户输入文本时提供匹配建议。这在网页设计中是非常实用的特性,尤其对于有大量可选项或需要快速查找的场景。 "jquery ...

    jquery自动补全插件

    **jQuery自动补全插件详解** 在Web开发中,用户输入常常是交互体验的重要环节,为了提高用户体验,很多网站和应用引入了自动补全(Autocomplete)功能。jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件...

    高级jQuery自动补全插件

    **jQuery自动补全插件详解** 在Web开发中,用户界面的交互性和便捷性是提升用户体验的关键因素之一。其中,自动补全功能是一项常见的需求,它可以在用户输入时提供预测建议,大大加快输入速度,降低错误率。jQuery...

    php+jquery 自动补全

    虽然jQuery本身并不直接提供代码补全功能,但很多编辑器和IDE都有针对jQuery的插件或扩展,提供jQuery函数和选择器的自动补全。例如,VSCode中的jQuery IntelliSense插件就是一个很好的例子。 将PHP和jQuery结合...

    jQuery自动补全效果

    jQuery自动补全效果是一种常见的前端交互功能,常用于搜索框、表单输入等场景,能够为用户提供便捷的建议列表,提高用户体验。这个功能基于流行的JavaScript库jQuery实现,它简化了DOM操作,使得创建动态和交互式的...

    JQuery+servlet自动补全例子

    在这个自动补全例子中,jQuery负责前端交互和动态数据显示。 **Servlet简介** Servlet是Java Web应用程序的一部分,用于处理服务器端的HTTP请求。它们通常用于接收、处理并响应客户端发送的数据。在这个例子中,...

    jQuery Autocomplete例子,自动补全功能

    jQuery Autocomplete是jQuery UI库中的一个强大组件,它为用户提供了在输入框中输入文本时的自动补全功能。这个功能极大地提升了用户体验,尤其是在需要用户输入特定关键字或从大量数据中选择的情况下。让我们深入...

    基于Jquery自动补全

    在介绍jQuery自动补全之前,我们先来回顾一下jQuery的基础知识。jQuery是一个JavaScript库,它简化了DOM操作、事件处理、动画设计和Ajax交互。通过使用$符号,我们可以快速地选中页面元素并对其进行操作。例如,`$(...

    jQuery 插件demo 自动补全

    "jQuery 插件demo 自动补全"是指一个使用jQuery编写的插件示例,它实现了自动补全的功能,通常在输入框中输入文字时,会根据已输入内容动态显示匹配的建议列表。这种功能常见于搜索框、地址栏等场景,提高了用户输入...

    jquery suggest 自动补全插件演示

    jQuery Suggest插件就是这样一个工具,它为网页中的输入框提供了自动补全功能,使得用户在输入时能快速找到并选择所需的内容,大大提高了输入效率。本篇文章将深入探讨jQuery Suggest插件的使用方法、原理以及如何...

    jQuery实现输入框自动补全邮箱提示

    在本示例中,“jQuery实现输入框自动补全邮箱提示”是指利用jQuery来创建一个功能,当用户在输入框中输入时,系统会自动提供匹配的邮箱地址作为提示,提高用户体验。这种功能在注册或联系表单中非常常见,可以减少...

    java与jQuery整合ajax仿googleSuggest自动补全实例

    总结起来,这个实例展示了如何利用Java后端和jQuery前端,结合AJAX技术,实现一个动态的自动补全功能。用户输入时,前端通过AJAX向服务器发送请求,服务器处理请求并返回JSON数据,前端再将这些数据解析并展示给用户...

    自动补全 autocomplete 例子 支持中文 数据库

    在PHP中,虽然没有内置的自动补全功能,但可以通过JavaScript库(如jQuery UI的Autocomplete插件)在前端实现,后端PHP负责提供补全建议的数据。例如,你可以创建一个API接口,接收用户的输入,查询数据库中相关的...

    jQuery+Ajax搜索框输入文字自动补全代码

    在本文中,我们将深入探讨如何使用jQuery和Ajax技术来实现一个搜索框的自动补全功能,就像百度搜索引擎那样的用户体验。这个功能允许用户在输入搜索关键词时,系统会根据已有的数据提供相关的建议,从而提高搜索效率...

    jQuery文本框input输入关键字自动补全筛选代码

    本示例中的"jQuery文本框input输入关键字自动补全筛选代码"是利用jQuery实现的一种常见用户体验增强功能,通常用于网站的搜索框,当用户在文本框中输入关键词时,系统会实时显示与输入关键词匹配的相关建议,提升...

    传智播客Jquery实例(防google自动补全)

    **jQuery 实例详解:防Google自动补全** jQuery 是一个高效、简洁且强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和AJAX交互。在"传智播客Jquery实例(防google自动补全)"的课程中,主要探讨的是...

    autocomplete自动补全的例子jsp

    综上所述,本示例中的"autocomplete自动补全的例子jsp"展示了如何在JSP项目中结合jQuery UI的Autocomplete插件,实现实时的搜索建议功能。通过前后端的协同工作,我们可以为用户提供便捷的输入体验,提升项目的整体...

    Ajax实现类似baidu的自动补全

    在本案例中,我们将探讨如何使用Ajax来实现一个类似百度搜索框的自动补全功能。 首先,我们需要创建一个HTML页面作为用户界面,包含一个输入框和一个隐藏的div,用于显示补全建议。这个输入框将监听用户的输入事件...

Global site tag (gtag.js) - Google Analytics