根据输入框内容实时查询展示, 类似百度输入框效果。
废话不多说, 上代码。
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>
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,<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. 效果。