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

搞定jquery.autocomplete

阅读更多
公司的一个升级包要做到类似google suggest那样的搜索框...

要求是输入中文即可,鄙人发挥对软件开发的热情,自行支持中英输入<也并不是真正的支持英文啦,只是英文简写>,真正支持中文需要下载一个java库,pinyin4j.还没用,不知道效果如何.

转回jquery.autocomplete,基本看看官方的代码能明白,还需要发挥一下自己的想像,呵呵.

说说鄙人遇到的问题:我的问题是,在输入中文的同时可以输入英文简称查到结果,然后把中文和英文输出到不同的地方.

本例子使用JSON的本地数据,ajax的方法需要网友自己发掘一下,也不难,或者你使用json转换的java lib也可以.

我使用的json输入为:
var bankNames = [
??? ??? { name: "中国银行", value: "BOC", key: "中国银行[BOC]"},
??? ??? { name: "招商银行", value: "CMB", key: "招商银行[CMB]"},
??? ??? { name: "阿里巴巴", value: "alibb", key: "阿里巴巴[alibb]"},
??? ??? { name: "阿里爷爷", value: "aliyy", key: "阿里爷爷[aliyy]"},
??? ??? { name: "阿里婆婆", value: "alipp", key: "阿里婆婆[alipp]"}
??? ];

js:
??? //我要把value插入一个hidden input
??? function findValueCallbackInsertInput(event, data, formatted) {
??????? //这里使用data,貌似data是一个对象...formatted是输入的内容<既上面的Key里面的东东>
??? ??? $("#hiddenInput").val(data.value);
??? }

$("#findBankName").autocomplete(bankNames,{
??????? //自动填充
??? ??? autoFill: true,
??? ??? formatItem: function(row, i, max) {
??? ??? ??? return row.key;
??? ??? },
??????? 返回当前input的值
??? ??? formatResult: function(row) {
??? ??? ??? return row.name;
??? ??? },
??? ??? matchSubset:1,
??? ??? matchContains:1,
??? ??? cacheLength:10
?
??? });

html:


??? suggest bankName:
??? <input type="text" id="findBankName">
??? <input type="button" value="Get Value">



??? 同步input
??? <input type="text" id="hiddenInput" value="">
??? <input type="button" value="Get Value">


分享到:
评论

相关推荐

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

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

    jquery.autocomplete.zip

    一般情况下,需要引入`jquery.js`,`ui.core.js`,`ui.widget.js`以及`ui.autocomplete.js`。 2. **HTML结构**:在HTML中创建一个`&lt;input&gt;`元素,用于用户输入,并为其指定一个唯一的ID,这将是插件绑定的目标元素...

    jquery.autocomplete.js&css.rar

    本文将深入探讨`jquery.autocomplete.js`和`jquery.autocomplete.css`这两个核心文件,以及如何利用它们来创建一个完善的自动完成组件。 首先,`jquery.autocomplete.js`是jQuery Autocomplete插件的核心JavaScript...

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

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

    自动补全-jquery.autocomplete.js

    《自动补全-jquery.autocomplete.js》 在Web开发中,自动补全功能是一种非常实用且常见的用户体验优化手段。它通常被应用于搜索框、表单输入等场景,能够帮助用户快速找到并选择他们想要的选项,提高输入效率。在...

    jquery.autocomplete.js

    与之配套的"jquery.autocomplete.min.js"是经过压缩和优化的版本,旨在减小文件体积,提高页面加载速度。 描述中提到的“jquery解决了跨浏览器问题”,这是jQuery库的一大优点。jQuery库的出现,使得开发者可以编写...

    jquery.autocomplete.js 自动补全插件实例

    `jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件,主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验,尤其在处理大量可选项时,用户可以通过输入部分文字快速...

    jquery.autocomplete 类包.rar

    这个类包“jquery.autocomplete.zip”包含了实现这一功能所需的两个核心文件:`jquery.autocomplete.css`和`jquery.autocomplete.min.js`,它们一起为开发者构建自动补全搜索框提供了强大的支持。 首先,我们来了解...

    jquery.autocomplete干净demo

    **jQuery Autocomplete 知识点详解** `jQuery Autocomplete` 是一个非常流行的 jQuery 插件,用于实现自动完成(或下拉建议)功能。在网页表单中,它能够为用户提供快速输入建议,提高用户体验。这个"jquery....

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

    `jQuery.autocomplete`是jQuery UI库中的一个组件,它为输入框提供了自动补全功能,极大地提升了用户体验。这个组件能够从服务器或者本地数据源获取数据,并在用户输入时动态显示匹配项。在某些情况下,我们可能需要...

    jquery.autocomplete的js+css

    在这个场景中,我们有两个关键文件:`jquery.autocomplete.css` 和 `jquery.autocomplete.min.js`。 1. **`jquery.autocomplete.css`**: 这个文件是 CSS 样式表,负责定义 `jQuery.autocomplete` 插件的外观和...

    jquery.autocomplete

    同时,为了美观和布局,还需要引入 `jquery.autocomplete.css` 文件,该文件定义了插件的样式规则。 ### 2. 使用方法 要在网页上使用 `jQuery Autocomplete`,首先需要选择一个输入元素,并为其添加 `autocomplete...

    jQuery.Autocomplete 中文支持.pdf

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

    jquery.autocomplete.min.js

    jquery autocomplete 支持自动补全,可以做成类似百度搜索那样的

    jQuery.Autocomplete 中文支持.docx

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

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

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

    jquery.autocomplete.js 动态传参

    jquery.autocomplete.js 无法动态传参,好是纠结哦。研究了半天终于搞明白了,再此做个总结,供以后使用,也分享给用样为此纠结的“童鞋”们。 调用: $("#tag").autocomplete( "url", { delay:10, matchSubset:1, ...

Global site tag (gtag.js) - Google Analytics