JS插件(1)--- autocomplete 异步加载下拉数据

随记一下自己用到jquery autocomplete时的方法。

1、首先定义一个文本框

<input type="hidden" id="statId" value="-1">   <input type="text" class="form-control grayTips" id="statName" placeholder="请输入站点名称/拼音首字母">  

2、脚本

     $("#statName").autocomplete({              source:function(request,response){                  $.ajax({                      type:"POST",                      url:"<%=path%>/jsp/stat.do?action=getStatList",                      dataType : "json",                      cache : false,                      async : false,                      data : {                          "statName" : encodeURI($("#statName").val())                      },                      success : function(json) {                          var data = eval(json);//json数组                          response($.map(data,function(item){                              var name = item.name;                              var id = item.id;                              return {                                  label:item.code+'--'+ item.name,//下拉框显示值                                  value:item.name,//选中后，填充到下拉框的值                                  id:item.id//选中后，填充到id里面的值                              }                          }));                      }                  });              },              delay: 500,//延迟500ms便于输入              select : function(event, ui) {                  $("#statId").val(ui.item.id);              }          });  

3、后台action返回Json格式数据，

//get param异步加载站点下拉列表  String statName = URLDecoder.decode(request.getParameter("statName") == null ? "" : request.getParameter("statName").trim(), "utf-8");  JSONArray jsonArray = new JSONArray();  JSONObject jsonObject = new JSONObject();  StatService service = new StatService();  List statList = service.getStatList(statName);  if (statList != null)  {      for (int i = 0; i < statList.size(); i++)      {          StationTable s = (StationTable)statList.get(i);          jsonObject.put("id", s.getStatId());          jsonObject.put("name", s.getStatName());          jsonObject.put("code", s.getStatCode());          jsonArray.add(jsonObject);      }  }  PrintWriter pw = null;  StringBuffer sb = new StringBuffer();  sb.append(jsonArray.toString());  try  {      response.setContentType("text/html;charset=GBK");      pw = response.getWriter();      pw.write(sb.toString());      pw.close();  }  catch (IOException e)  {      e.printStackTrace();  }  

4、效果如图：

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

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入门
—————————————————————————————————————————————————–