使用jquery.autocomplete.js插件实现自动补全进行查询

页面首先引用  jquery.autocomplete.js插件,插件可在网上进行下载

 <script type="text/javascript" src="${path}/js/jquery.autocomplete.js"></script>

页面input查询框

<input id="searchInfo" class="textbox" placeholder="请输入查询信息" style="width:100px;margin-top:-1px" />

js调用

$(document).on('focus','#searchInfo',function(){
    var arr=[];
    TeJax({
        url:$.contextPath+"/userOp_autoCompleName",
        type: 'POST',
        async: false,
        success:function(rel){
     $.each(rel.rows,function(){
        arr.push(this.username);
     })
        }
    })

    var arl=$.map(arr, function (team) {
        return { value: team, data: { category: '名称' }};
    });
    $('#searchInfo').devbridgeAutocomplete({
        lookup: arl,
        minChars: 1,
        onSelect:function(rel){
            var value=rel.value;
             loadUser('name',value);
            $("#searchInfo").val('');
        },
        showNoSuggestionNotice: true,
        noSuggestionNotice: '对不起，暂无找到当前输入所匹配的名称',
       // groupBy: 'category',  是否分组
      })
    })

后台Action部分:

 /**
     * 自动补全用户名进行查询
     * 查询所有的用户
     *@author LH
     *@data 2016年11月12日
     * @return
     */
    public String autoCompleName(){
    	 //获取所有的用户信息 过滤掉管理员和老师
    	  List<UserBean>list=userManager.getAllUserListfiter();
    	  jsonMap = new JSONObject();
          Map<Object, Object> map = new HashMap<>();
          map.put("rows", list);
          jsonMap = JSONObject.fromObject(map);
    	return SUCCESS;
    }