Bootstrap-3-Typeahead 异步查询数据，自动补全

Bootstrap-3-Typeahead 异步查询数据，自动补全

1. 引入bootstrap3-typeahead.min.js

2. input 框添加autocomplete=“off” data-provide=“typeahead”

<input id="tId" name="tName" autocomplete="off" data-provide="typeahead" type="text" />

3. 为input 框绑定事件

$(function() {
		$("#tId").typeahead({
            source: function (query, process) {
                $.ajax({
                    url: ctx + "/xxx/xx/findByName.shtml",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    timeout: 50000,
                    data:  $("#paramName").val(),//查询参数
                    type: "POST",
                    async: false,
                    success: function (msg) {
                        var array = [];
                        $.each($.parseJSON(msg.message), function (i, item) {
                            var aItem = { id: item.id, name: item.name };//把后台传回来的数据处理成带name形式
                            array.push(aItem);
                        });
                        process(array);
                    }
                })
            },
            displayText:function(item){
                return item.name;
            }
        });
});

4. 后端代码实现

**Controller**


@RequestMapping("findByName")
    public void findByName(HttpServletRequest req, HttpServletResponse res,@RequestBody String name) {
        Map<String,JSONArray> map = certificateMakingService.findByWname(name);
        writeResultObj(true, map.get("ggxh").toJSONString(), res);
    }


**ServiceImpl**


@Override
    public Map<String,JSONArray> findByWname(String measuringInstrumentName) {
        List<CertificateMaking> list = certificateMakingDao.findByWname(measuringInstrumentName);
        List<String> list1=new ArrayList<>();
        List<String> list2=new ArrayList<>();
        Map<String,JSONArray> listMap =new HashMap<>();
        Iterator<CertificateMaking> iterator = list.iterator();
        while (iterator.hasNext()) {
            CertificateMaking certificateMaking = iterator.next();
            if(!list2.contains(certificateMaking.getManufacturingUnit())){
                list2.add(certificateMaking.getManufacturingUnit());
            }
            if(!list1.contains(certificateMaking.getModelSpecification())){
                list1.add(certificateMaking.getModelSpecification());
            }
            iterator.remove();
        }

        /* Json格式的数组形式 */
        JSONObject obj;
        JSONArray array1 = new JSONArray();
        /* json格式的单个对象形式 */
        for ( int i = 0; i < list1.size(); i++ )
        {
            obj = new JSONObject();
            /* 依次填充每一个Java实体对象 */
            try {
                obj.put( "id", i );
                obj.put( "name", list1.get(i));
                array1.add( obj );
                /* 将JSONObject添加入JSONArray */
            }
            catch ( JSONException e ) {
                e.printStackTrace();
            }
        }
        JSONArray array2 = new JSONArray();
        /* json格式的单个对象形式 */
        for ( int i = 0; i < list2.size(); i++ )
        {
            obj = new JSONObject();
            /* 依次填充每一个Java实体对象 */
            try {
                obj.put( "id", i );
                obj.put( "name", list2.get(i));
                array2.add( obj );
                /* 将JSONObject添加入JSONArray */
            }
            catch ( JSONException e ) {
                e.printStackTrace();
            }
        }
        listMap.put("sccj",array2);//生产厂家
        listMap.put("ggxh",array1);//规格型号
        return listMap;
    }

我这里是获取了两个数据，一个数据可以简化。