搞定jquery.autocomplete

最新推荐文章于 2025-08-12 16:19:53 发布

最新推荐文章于 2025-08-12 16:19:53 发布 · 80 阅读

文章标签：

#jQuery #阿里巴巴 #json #Ajax #Google #ViewUI

本文介绍了一种结合中文及英文缩写的搜索功能实现方法，通过使用pinyin4j库支持中文输入，并利用jQuery autocomplete插件完成自动补全功能。文章提供了一个具体的示例，展示了如何将中英文输入结果分别显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司的一个升级包要做到类似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">