多輸入jQuery的自動完成_renderItem問題觸發自動完成

Question

快速的解釋：我有3個輸入FIRST_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"> 

我使用自動完成類作爲用於啓動jQuery用戶界面自動完成功能的選擇器（見下面的代碼），使得在任何這些填充會導致使用所有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; 

我現在嘗試這個權利，它爲我工作。也應該爲你工作。

Answer 2

這工作對我來說，特別是如果輸入元素動態生成的：

$('.autocomplete').each(function() { 
    $(this).data('uiAutocomplete')._renderItem = function (ul, item) { 
      // render item code 
    }; 
}); 

Answer 3

上述兩個答案我指出了正確的方向，但最終，它看起來像這樣（包括了一些更新爲jquery-ui）對我來說：

$('.autocomplete').each(function(i, el) { 
    $(el).data('ui-autocomplete')._renderItem = function(ul, item) { 
     // Do stuff 
    }; 
}); 

Answer 4

謝謝你解決了我的問題。我通過「創建」功能實現它

$.extend(proto, { 
    _initSource: function() { 
     if (this.options.html && $.isArray(this.options.source)) { 
      this.source = function (request, response) { 
       response(filter(this.options.source, request.term)); 
      }; 
     } else { 
      initSource.call(this); 
     } 
    }, 

    create: function() { 
     $(this).data('ui-autocomplete')._renderItem = function (ul, item) { 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append($("<a></a>")[this.options.html ? "html" : "text"](item.EmployeeHtml)) 
       .appendTo(ul); 
    }; 
}