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

—————————————————————————————————————————————————–

java架构师项目实战,高并发集群分布式,大数据高可用视频教程，共760G

下载地址：

https://item.taobao.com/item.htm?id=555888526201

01.高级架构师四十二个阶段高
02.Java高级系统培训架构课程148课时
03.Java高级互联网架构师课程
04.Java互联网架构Netty、Nio、Mina等-视频教程
05.Java高级架构设计2016整理-视频教程
06.架构师基础、高级片
07.Java架构师必修linux运维系列课程
08.Java高级系统培训架构课程116课时
+
hadoop系列教程，java设计模式与数据结构， Spring Cloud微服务， SpringBoot入门
—————————————————————————————————————————————————–