Автозаполнение jQuery _Проблема renderItem с несколькими входными данными для запуска автозаполнения

Краткое пояснение :У меня есть 3 входа первое _имя , последнее _имя и контакт _номер . Все они имеют имя класса autocomplete . например.

<input type="input" name="first_name" id="first_name" class="autocomplete">
<input type="input" name="last_name" id="last_name" class="autocomplete">
<input type="input" name="contact_number" id="contact_number" class="autocomplete">

Я использую класс автозаполнения в качестве селектора для запуска функции автозаполнения пользовательского интерфейса jQuery (, см. код ниже ), так что заполнение любого из них приведет к поиску ajax с использованием всех трех входов.Поскольку я использую все 3 поля для поиска, результат должен быть в определенном месте (, а не под каждым входом, как это обычно бывает ), поэтому я использую div с таблицей внутри, которая, в свою очередь, отображает результаты. Это возможно путем переопределения внутренней функции _renderItem (, см. код ниже ).

Однако все это прекрасно работает только для самого первого ввода в форме, например. первое _имя. Все остальные входы отображаются в раскрывающемся списке li под соответствующими входами. Кажется, что переопределение _renderItem игнорируется для последующих входов. Я попытался поменять местами входы, и в зависимости от того, что сначала работает правильно, а другие нет. Любые предложения относительно того, как я могу исправить поведение?

    $(document).ready(function() {
        $(".autocomplete").autocomplete({
            search: function(event, ui) {
                $("#autocompleteoutput table tbody").empty();
                $("#autocompleteoutput").css("display", "inline");
            },
            source: function(request, response) {
                jQuery.ajax({
                    url: "'.site_url('reservations/search_customer').'",
                    type: "post",
                    dataType: "json",
                    data: {
                        first_name: $("#first_name").val(),
                        last_name: $("#last_name").val(),
                        contact_number: $("#contact_number").val(),
                        '.$this->security->get_csrf_token_name().' : "'.$this->security->get_csrf_hash().'"
                    },
                    success: function(data) {
                        response(jQuery.map(data, function(item) {
                            return {
                                diner_id: item.diner_id,
                                first_name: item.first_name,
                                last_name: item.last_name,
                                dialing_code: item.dialing_code,
                                country_id: item.country_id,
                                contact_number: item.contact_number,
                                email: item.email
                            }
                        }))
                    }
                })
            }
        })
       .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<tr class=\"customerselect\" data-dinerid=\"" + item.diner_id + "\" data-fname=\"" + item.first_name + "\" data-lname=\"" + item.last_name + "\" data-countryid=\"" + item.country_id + "\" data-num=\"" + item.contact_number + "\" data-email=\"" + item.email + "\"></tr>" )
               .data( "item.autocomplete", item )
               .append( "<td><span class=\"icon-user\">" + item.first_name + " " + item.last_name + "</span></td>")
               .append( "<td><span class=\"icon-phone\">(+" + item.dialing_code + ") " + item.contact_number + "</span></td>" )
               .append( "<td><span class=\"icon-mail\">" + item.email + "</span></td>" )
               .appendTo($("#autocompleteoutput table tbody"));
        };
    });