快速解释:我有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"));
};
});
答案 0 :(得分:12)
此处的.data(“自动填充”)仅返回第一个元素的自动填充数据。在分配自动完成控件后,请尝试为每个输入单独使用此方法。
我的意思是这样的
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;
我现在尝试了这个,它对我有用。也应该适合你。
答案 1 :(得分:10)
这对我也有用,特别是如果动态生成输入元素:
$('.autocomplete').each(function() {
$(this).data('uiAutocomplete')._renderItem = function (ul, item) {
// render item code
};
});
答案 2 :(得分:7)
上述两个答案都指向了正确的方向,但最后,对我来说,它看起来像这样(包括对jquery-ui的一些更新):
$('.autocomplete').each(function(i, el) {
$(el).data('ui-autocomplete')._renderItem = function(ul, item) {
// Do stuff
};
});
答案 3 :(得分:0)
谢谢你解决了我的问题。我是通过&#39;创建&#39;来实现的。功能
$.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);
};
}
答案 4 :(得分:0)
$('.autocomplete').each(function(i, el) {
$(el).autocomplete({
source: function(request, response) {
$.ajax({
url: "/Actual/Provision",
type: 'POST',
dataType: "json",
data: {'term': request.term},
success: function(data) {
response(data);
},
error: function(data) {
alert('failed to load autocomplete source data');
}
});
},
minLength: 1,
select: function(event, ui) {
$(this).parent().find("input[name='submission_provision[]']").val(ui.item.name);
$(this).parent().find("input[name='submission_part_age[]']").val(ui.item.part_age);
$(this).parent().find("input[name='submission_part_smr[]']").val(ui.item.part_smr);
$(this).parent().find("input[name='submission_labour_age[]']").val(ui.item.labour_age);
$(this).parent().find("input[name='submission_labour_smr[]']").val(ui.item.labour_smr);
return false;
},
change: function(event, ui) {
if ($(this).val() == '') {
$(this).parent().find(".provision-ref").val("");
}
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul);
return $("<li>")
.append("<a>" + item.name + "</a>")
.appendTo(ul);
};
});