JQuery autocomplete ajax 实现自动完成

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

废话不多说， 上代码。

1.引入插件。

 

2.JS代码。

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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