关闭

Jquery autocomplete 异步加载下拉数据

标签: ajaxjqueryautocomplete
4033人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:148800次
    • 积分:1431
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:5篇
    • 译文:0篇
    • 评论:26条
    文章分类
    最新评论