JQuery autocomplete ajax 实现自动完成

来源：互联网发布：电子听诊器分析软件编辑：程序博客网时间：2024/04/30 16:33

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

废话不多说，上代码。

1.引入插件。

?
1

$( "#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);
                 
              }
               
            });

1 0