Jquery autocomplete 异步加载下拉数据

来源：互联网发布：软件营销策划方案编辑：程序博客网时间：2024/06/05 21:58

随记一下自己用到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();            }

效果如图：

1 0