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