Jquery 如何自定义自动完成

我需要显示自定义的自动完成json数据。JSON文件的格式为：

[
{"full_name":"Meena Khadikar","slug":"meena-khadikar","people_id":"630","name":"kumar,prabhu"},
{"full_name":"Meena","slug":"meena","people_id":"817","name":""},
{"full_name":"Seshadri Meenakshi","slug":"meenakshi-seshadri","people_id":"1410","name":"meenan kumaran"}
]

如果我的输入是mee，结果应该是：

• Meena Khadikar
• Meena
• SeshadriMeenakshi

如果输入为kum：

• 米娜·哈迪卡尔 （kumar，prabhu）
• Seshadri Meenakshi （meenankumaran）

我的尝试是：

    $( ".search_name" ).autocomplete({
        minLength: 2,
        source: function( request, response ) {
            var inp = request.inp;
            if ( inp in cache ) {
                response( cache[ inp ] );
                return;
            }
        $.getJSON( "<?php echo PROJECT_PATH.'searchProfile'; ?>", {inp: request.inp}, function( data, status, xhr ) {
            cache[ inp ] = data;                    
            response( data );
            });            
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
                item.full_name = item.full_name.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.inp) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append('<a href="<?php echo PROJECT_PATH.'searchProfile'; ?>'+item.slug +'/'+item.people_id + '">' + item.full_name + '</a>')
                        .appendTo(ul);
            };
        },
        select: function (event, ui) {                                                                
                var href = '<?php echo PROJECT_PATH.'searchProfile'; ?>'+ui.item.slug +'/'+ui.item.people_id;
                window.location.href = href;
        return false;
      },
      focus: function (event, ui) {
        event.preventDefault();
        $("#search_name").val(ui.item.slug);
    }

});

$（“.search\u name”）.autocomplete({
最小长度：2，
来源：功能（请求、响应）{
var inp=request.inp；
if（缓存中的inp）{
响应（缓存[inp]）；
返回；
}
$.getJSON（“，{inp:request.inp}，函数（数据，状态，xhr）{
cache[inp]=数据；
答复（数据）；
});            
$.ui.autocomplete.prototype.\u renderItem=函数（ul，项目）{
item.full_name=item.full_name.replace（新RegExp（（？！[^&]+；）（？！）（？！[^&]+；），“gi”），“$1”；
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“”）
.附录（ul）；
};
},
选择：函数（事件，ui）{
var href=''+ui.item.slug+'/'+ui.item.people\u id；
window.location.href=href；
返回false；
},
焦点：功能（事件、用户界面）{
event.preventDefault（）；
$（“#搜索名称”）.val（ui.item.slug）；
}
});

---

以更好的方式编辑我的脚本。

您有四个主要问题：

必须将renderItem调用添加到autocomplete实例中

您需要过滤进入getJSON调用的结果值

您需要在renderItem回调中使用this.\u value（）

需要时，您需要连接全名和名称字段

var数据=[
{“全名”：“Meena Khadikar”，“slug”：“Meena Khadikar”，“人民id”：“630”，“姓名”：“kumar，prabhu”}，
{“全名”：“Meena”，“slug”：“Meena”，“人名”：“817”，“姓名”：“}，
{“全名”：“Seshadri Meenakshi”，“slug”：“Meenakshi Seshadri”，“人物id”：“1410”，“姓名”：“meenan kumaran”}
];
$（“.search\u name”）.autocomplete({
最小长度：2，
来源：功能（请求、响应）{
var inp=request.term；
//$.getJSON（'1.json'，{inp:request.term}，函数（数据，状态，xhr）{
var filteredData=data.filter（e=>e.full_name.tolocalLowercase（）.indexOf（request.term.tolocalLowercase（））！=-1||
e、 name.tolocalLowercase（）.indexOf（request.term.tolocalLowercase（））！=-1）；
响应（过滤数据）；
//});
},
选择：功能（事件、用户界面）{
var href='1.json'+ui.item.slug+'/'+ui.item.people\u id；
window.location.href=href；
返回false；
},
焦点：功能（事件、用户界面）{
event.preventDefault（）；
$（“#搜索名称”）.val（ui.item.slug）；
}
}).autocomplete（“实例”）。\u renderItem=函数（ul，项）{
var val=项目全名；
if（val.tolocalLowercase（）.indexOf（this._value（）.tolocalLowercase（））=-1）{
val+='（'+item.name.replace（'，'，'）+'）；
}
val=val.replace（新的RegExp（（？！[^&；]+；）（？！（？！[^&；]+；）），“gi”），“$1”；
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“”）
.附录（ul）；
};

标签：