jQuery - Autocompleter 自动完成

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();
    }

}