Как настроить автозаполнение

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 результат должен быть:

• Ми на Хадикар
• Mee на
• Сешадри Ми Накши

Если ввод кум :

• Мина Хадикар ( кум ар, прабх)
• Сешадри Минакши (меенан кум аран)

Моя попытка:

    $( ".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. Вам необходимо использовать this._value () внутри обратного вызова _renderItem
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>