JQuery autocomplete ajax 实现自动完成

标签：jquery   autocomplete   

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

废话不多说， 上代码。

1.引入插件。

<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery/jquery.autocomplete.css"  />
<script type="text/javascript" src="${ctx}/js/jqueryUI/jquery.ui.autocomplete.js"></script> 

$( "#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,<span style="font-family: Arial, Helvetica, sans-serif;"> // 其他参数， 可以自定义</span>
	                            	                            
	                        }
	                    }));
	                }
	            });
	        },
	        minLength: 2,  // 输入框字符个等于2时开始查询
	        select: function( event, ui ) { // 选中某项时执行的操作
	        	// 存放选中选项的信息
	        	$("#g_code").val(ui.item.code);
	        	$("#g_object_id").val(ui.item.object_id);
	        	
	          }
	          
	        });

3. 效果。

JQuery autocomplete ajax 实现自动完成

标签：jquery   autocomplete   

原文地址：http://blog.csdn.net/wuwenjinwuwenjin/article/details/46530043