jQuery autocomplete _renderItem 问题，多个输入触发自动完成

Question

快速说明:我有 3 个输入 first_name、last_name 和 contact_number。它们都有类名自动完成。例如

<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">

我使用 autocomplete 类作为选择器来启动 jQuery UI 自动完成功能(请参见下面的代码)，这样填写其中任何一个都会导致使用所有 3 个输入的 ajax 搜索。因为我使用所有 3 个字段来进行搜索，所以结果必须位于特定位置(而不是通常情况下在每个输入下)，因此我使用带有表格的 div，其中依次显示结果。这可以通过覆盖内部 _renderItem 函数来实现(参见下面的代码)。

这一切都工作得很好，但是，仅适用于表单中的第一个输入，例如名。其他输入均显示在其各自输入下方的下拉列表中。似乎后续输入会忽略 _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"));
        };
    });

Answer 1

此处的 .data("autocomplete") 仅返回第一个元素的自动完成数据。分配自动完成控件后，尝试对每个输入单独使用此方法。

我的意思是这样

 function myRenderFunc(ul,item){
     // code for the _renderItem method
 }

 $(".autocomplete").autocomplete({
        //your autocomplete code
 })

 $('#first_name').data( "autocomplete" )._renderItem = myRenderFunc;
 $('#last_name').data( "autocomplete" )._renderItem = myRenderFunc;
 $('#contact_number').data( "autocomplete" )._renderItem = myRenderFunc;

我现在就尝试了这个方法，它对我有用。应该也适合你。