自动补全Typeahead

采用 Typeahead （Bootstrap-3-Typeahead-master）

 

<script type="text/javascript"
    src="/js/plugins/bootstrap3-typeahead.min.js"></script>

<script type="text/javascript">//自动补全
        $("#loginInfoDisplay").typeahead({
            minLength:3,//最小开始查询的字符个数
            items:5,//下拉列表中最多显示的条数
            source:function(query,process){//加载数据源
                $.ajax({
                    dataType:"json",
                    type:"POST",
                    url:"vedioAuth_autocomplate.do",
                    data:{str:query},
                    success:function(data){//这个data就是一个json对象的数组{id:xx,username:xxxx}
                        if(data && data.length){
                            process(data);//process就是交给我们获得数据之后用来调用的方法,这个方法执行了,下拉列表就出来了
                        }
                    }
                });
            },
            //用来告诉typeahead怎么显示json对象中的内容
            displayText:function(item){
                return item.username
            }
        }).change(function(){
            var current = $(this).typeahead("getActive");
            if(current){
                $("#loginInfoValue").val(current.id);
            }
        });
</script>

　　　　　　　　　　　　　　　　　<div class="col-sm-6">
                                <div class="dropdown" id="autocomplate">
                                    <input type="text" class="form-control" id="loginInfoDisplay"
                                        autocomplete="off" /> <input type="text" name="loginInfoValue" id="loginInfoValue"/>
                                </div>
                            </div>

=========================================================================

/**
     * 用于用户的automcomplate
     */
    @RequestMapping("vedioAuth_autocomplate")
    @ResponseBody
    public List<Map<String, Object>> autoComplate(String str){
        return userinfoService.autoComplate(str);
    }

=============================================================

@Override
    public List<Map<String, Object>> autoComplate(String keyword) {
        
        return this.userinfoMapper.autoComplate(keyword);
    }

=============================================================

<select id="autoComplate" resultType="hashmap">
      SELECT id,username 
      FROM logininfo WHERE username LIKE concat(#{keyword},'%')
  </select>