根据输入框内容实时查询展示， 类似百度输入框效果。
废话不多说， 上代码。
1.引入插件。
<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, // 其他参数， 可以自定义
}
}));
}
});
},
minLength: 2, // 输入框字符个等于2时开始查询
select: function( event, ui ) { // 选中某项时执行的操作
// 存放选中选项的信息
$("#g_code").val(ui.item.code);
$("#g_object_id").val(ui.item.object_id);
}
});
3. 效果。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论