GitHub : https://github.com/fitiskin/jquery-autocompleter
First step,引入js 及 css:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.autocompleter.css">
如我要自动填充所要配置的服务商,我一般会这样想:
1、要从后台获取服务商json数据,开始写接口(实体类添加相应临时变量):
@Transient
private String pinyinOfFirm;
@RequestMapping("selectFirmLists.json")
@ResponseBody
public List<Firm> selectFirmLists(){
HashedMap m = new HashedMap();
List<Firm> firmList = firmService.queryByCondition(null,m); //所有数据
for(Firm f : firmList){
//f.setFirmName(f.getName()); //公司名赋给临时变量
f.setPinyinOfFirm(ChineseToEnglish.getPingYin(f.getName())+f.getName()); //为每一个临时变量pinyinOf赋值全拼+汉字
}
return firmList;
}
2、前台页面想好字段名,id名:
<div class="form-group">
<label class="col-sm-3 control-label">
服务商: <span class="symbol required"></span>
</label>
<div class="col-md-9">
<input id="firmName" name="firmName" placeholder="服务商名称" class="form-control"
required="ture"/>
<div style="display:none;">
<input id="firmCode" readonly="readonly" name="firm_code" type="text"/> #*编辑时 自动填充 服务商名 及 代码*#
</div>
</div>
</div>
3、写JS,调用接口,实现自动填充方法:
var firms; //服务商
$(function () {
$.post('/admin/teacher/selectFirmLists.json', {},
function (data) {
firms = data; //
AUTOFILL();
}, "json");
});
//设置服务商名自动完成
function AUTOFILL(); {
$('#firmName').autocompleter({
highlightMatches: true,
scrollHeight: 300,
source: firms, //源对象
matchContains: true,
customLabel: "pinyinOfFirm", //模糊搜索的标签
customValue: "name", //选中放入的值
template: '{{ name }}', //显示的模版
hint: false,
empty: false,
limit: 10,
callback: function (value, index, selected) {
if (selected) {
$("#firmCode").val(selected.code); //json 返回的code字段值 赋给 firm_code字段
$('#firmName').autocompleter('close');
}
}
});
}
效果:
----------------------------------------------------------------------------------------------
附工具类 ChineseToEnglish.java
package com.wit.core.util;
import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;
import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;
import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;
import net.sourceforge.pinyin4j.format.HanyuPinyinVCharType;
import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;
public class ChineseToEnglish {
// 将汉字转换为全拼
public static String getPingYin(String src) {
char[] t1 = null;
t1 = src.toCharArray();
String[] t2 = new String[t1.length];
HanyuPinyinOutputFormat t3 = new HanyuPinyinOutputFormat();
t3.setCaseType(HanyuPinyinCaseType.LOWERCASE);
t3.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
t3.setVCharType(HanyuPinyinVCharType.WITH_V);
String t4 = "";
int t0 = t1.length;
try {
for (int i = 0; i < t0; i++) {
// 判断是否为汉字字符
if (Character.toString(t1[i]).matches(
"[\\u4E00-\\u9FA5]+")) {
t2 = PinyinHelper.toHanyuPinyinStringArray(t1[i], t3);
t4 += t2[0];
} else
t4 += Character.toString(t1[i]);
}
// System.out.println(t4);
return t4;
} catch (BadHanyuPinyinOutputFormatCombination e1) {
e1.printStackTrace();
}
return t4;
}
// 返回中文的首字母
public static String getPinYinHeadChar(String str) {
String convert = "";
for (int j = 0; j < str.length(); j++) {
char word = str.charAt(j);
String[] pinyinArray = PinyinHelper.toHanyuPinyinStringArray(word);
if (pinyinArray != null) {
convert += pinyinArray[0].charAt(0);
} else {
convert += word;
}
}
return convert;
}
// 将字符串转移为ASCII码
public static String getCnASCII(String cnStr) {
StringBuffer strBuf = new StringBuffer();
byte[] bGBK = cnStr.getBytes();
for (int i = 0; i < bGBK.length; i++) {
strBuf.append(Integer.toHexString(bGBK[i] & 0xff));
}
return strBuf.toString();
}
}