如何自定义自动完成

Question

我需要显示自定义 自动完成 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，结果应该是：

• 见na Khadikar
• 见呐
• Seshadri Meenakshi

如果输入是kum：

• 米娜·卡迪卡 (kumar,prabhu)
• Seshadri Meenakshi (meenan kumaran)

我的尝试是：

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

});

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

Answer 1

您有四个主要问题：

1. _renderItem 调用必须添加到自动完成实例中。
2. 您需要过滤进入 getJSON 调用的结果值。
3. 您需要在 _renderItem 回调中使用 this._value()
4. 您需要在需要时连接 full_name 和 name 字段。

var data = [
    {"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"}
];

$(".search_name").autocomplete({
    minLength: 2,
    source: function (request, response) {
        var inp = request.term;
        //$.getJSON('1.json', {inp: request.term}, function (data, status, xhr) {
            var filteredData = data.filter(e => e.full_name.toLocaleLowerCase().indexOf(request.term.toLocaleLowerCase()) != -1 ||
                    e.name.toLocaleLowerCase().indexOf(request.term.toLocaleLowerCase()) != -1);
            response(filteredData);
        //});
    },
    select: function (event, ui) {
        var href = '1.json' + 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);
    }
}).autocomplete("instance")._renderItem = function (ul, item) {
    var val = item.full_name;
    if (val.toLocaleLowerCase().indexOf(this._value().toLocaleLowerCase()) == -1) {
        val += '(' +  item.name.replace(',', ' ') + ')';
    }
    val = val.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this._value()) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append('<a href="1.json' + item.slug + '/' + item.people_id + '">' + val + '</a>')
            .appendTo(ul);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" class="search_name">
</div>