Jquery autocomplete 异步加载下拉数据

原创 2015年07月09日 16:16:50

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

效果如图:



版权声明:本文为博主原创文章,未经博主允许不得转载。

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery自动补全插件autocomplete的使用方法之autocomplete ajax获取数据展示

今天做项目的时候为了体验好一点,想做一个自动补全提示功能,考虑到jquery自带有这个插件,当然优先考虑用这个了,毕竟重复造轮子的事情没有必要的,但是中间也遇到了点小问题,因为从jquery官网下载下...
  • llqqxf
  • llqqxf
  • 2016年11月08日 10:13
  • 1453

jquery autocomplete ajax动态获取数据

引入的js文件 方法一:前台数据   $().ready(function() {         $("#TReceiverid").autocomplete(                ...

YII框架中使用jQuery UI : 自动完成(Autocomplete)--本地数据和使用ajax获取远程数据实例

案例一:本地数据获取 html lang="en"> head>   meta charset="utf-8">   title>jQuery UI Autocomplete - 本地数据...

jquery-autoComplete 处理返回的json对象问题

由于项目中需要用到autoComplete 的功能,一直对觉得jQuery的功能比较强大,于是谷歌搜索了这方面的插件,经过比较最后选择了jquery.autocomplete。直接在官网下载了demo...
  • pcno1
  • pcno1
  • 2011年11月07日 16:33
  • 9118

java中用jquery AutoComplete 实现自动补全(二)后台JSON实现自动补全

java 中使用 jquery autocomplete 实现后台获取 JSON数据,实现简单的搜索功能。

JQueryAjaxAutocomplete实现自动补全

要实现如图所示效果,通过ajax,和Autocomplete完成匹配,整了好久,做一下记录。 先分析各个参数的作用: 我们需要在html代码中引入jQuery UI的js文...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery.autocomplete 异步动态加载

这里用的是jquery-ui.js 的 autocomplete 不是 jquery.autocomplete.js 希望可以帮到大家 ...

AJAX autocomplete 动态补全从数据库加载数据

//根据工号查询 $("#se").change(function() { if ($("#se").val() == "2") { $("#auctionName").autoco...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery autocomplete 异步加载下拉数据
举报原因:
原因补充:

(最多只允许输入30个字)