JS插件(2)--- jquery.autocomplete 异步加载数据完整版

一、引入jquery.autocomplete.js与样式

下载地址

上http://www.jq22.com/jquery-info12967 下载js文件

样式

.autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 0px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }

二、在页面加入input

<input v-bind:disabled="formInfo.state == 1" type="text" id="autocomplete" name="userAddParams.username" class="form-control" v-model="addData['userAddParams.username']" rangelength="[1,20]" required="true">

三、编写js

$('#autocomplete').autocomplete({
            minChars: 1,     
            maxHeight:300,
            scroll:true,
            serviceUrl: base + '/userinfo/base/listUsers.do',           
            onSelect: function (suggestion) {
                $("#userId").val(suggestion.data)
            }
        });

四、java后台编写

public class UserInfoAction extends CoreBaseAction implements ServletResponseAware {
    private HttpServletResponse response;
    public void listUsers() throws IOException {
            List<JsonData> jsonDatas = new ArrayList<JsonData>();
            List<User> list = service.queryUsers(query);
            for (int i = 0; i < list.size(); i++) {
                User user = list.get(i);
                JsonData jsonData = new JsonData();
                jsonData.setValue(user.getUsername());
                jsonData.setData(user.getId()+"|" + user.getAddress() + "|" + user.getEmail() + "|" + user.getMobile());
                jsonDatas.add(jsonData);
            }
            JSONObject json = new JSONObject();
            JSONArray jsonArray = JSONArray.fromObject(jsonDatas);
            json.put("query", query);
            json.put("suggestions", jsonArray);
        response.getWriter().print(json);
    }
 @Override
    public void setServletResponse(HttpServletResponse response) {
        this.response = response;
    }
}