Jquery autocomplete 异步加载下拉数据

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

首先定义一个文本框

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

</pre><p><pre name="code" class="javascript">    function onLoadStation() {

		$("#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);
			}
		});
	}

后台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();
            }

效果如图：