JQuery autocomplete ajax 实现自动完成

页面导航:首页 > 网络编程 > JavaScript > JQuery autocomplete ajax 实现自动完成

JQuery autocomplete ajax 实现自动完成

来源: 作者: 时间:2016-01-23 10:23 【

根据输入框内容实时查询展示, 类百度输入框效果。废话不多说, 上代码。1 引入插件。 2 JS代码。$( " searchStreedRoad_auto " ) autocomplete({ searchStreedRoad_auto 输入框id

根据输入框内容实时查询展示, 类似百度输入框效果。

废话不多说, 上代码。

1.引入插件。

 



<script type="text/javascript" src="${ctx}/js/jqueryUI/jquery.ui.autocomplete.js"></script>
2.JS代码。

 

 

$( "#searchStreedRoad_auto" ).autocomplete({// searchStreedRoad_auto 输入框id
	        source: function( request, response ) {
	            $.ajax({
	                url: ctx + '/gisQuery/gisAutoQuery.action', // 后台请求路径
	                dataType: "json",
	                data:{
	                    "inputStr": request.term    // 获取输入框内容
	                },
	                success: function( data ) {

	                    response( $.map( $.parseJSON(data), function( item ) { // 此处是将返回数据转换为 JSON对象,并给每个下拉项补充对应参数
	                        return {
	                             // 设置item信息
	                             label: item.chinese_name +"	"+item.english_name, // 下拉项显示内容
	                             value: item.chinese_name,   // 下拉项对应数值
	                             code:item.code, // 其他参数, 可以自定义
	                             object_id : item.object_id, // 其他参数, 可以自定义
	                            	                            
	                        }
	                    }));
	                }
	            });
	        },
	        minLength: 2,  // 输入框字符个等于2时开始查询
	        select: function( event, ui ) { // 选中某项时执行的操作
	        	// 存放选中选项的信息
	        	$("#g_code").val(ui.item.code);
	        	$("#g_object_id").val(ui.item.object_id);
	        	
	          }
	          
	        });


 

3. 效果。

\

 

 

 

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<