簡単な説明: first_name、last_name、contact_numberの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 UI オートコンプリート機能 (以下のコードを参照) を開始するためのセレクターとしてオートコンプリート クラスを使用し、これらのいずれかを入力すると、3 つの入力すべてを使用して ajax 検索が行われるようにします。3 つのフィールドすべてを使用して検索を行うため、結果は特定の場所 (通常のように各入力の下ではなく) にある必要があるため、結果を表示するテーブルを含む div を使用します。これは、内部の _renderItem 関数をオーバーライドすることで可能になります (以下のコードを参照)。
これはすべて完全に正常に機能しますが、first_name などのフォームの最初の入力に対してのみです。他の入力はすべて、それぞれの入力の下のドロップダウン リストに表示されます。後続の入力では _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"));
};
});