JQuery autocomplete ajax 实现自动完成

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

废话不多说， 上代码。

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. 效果。