我正在寻找一段时间让它工作。
这是我最后一次尝试。
我有这个html:
<td>
<input type="text" value="" class="typeahead" style="width: 310px" autocomplete="off" data-provide="typeahead" />
<input type="hidden" value="" class="delivery" name="delivery[]" />
</td>
在JS方面,我有这个:
$(".typeahead").on("create", function() {
$(this).typeahead({
limit : 20,
remote : {
url: '/ajax/places/?query=',
replace: function(url, encodedUrl) {
return url + encodedUrl + '&categorySon=5';
},
filter: function (result) {
var list = [];
result.aaData.map(function (item) {
list.push({
value: item.name + ' (' + item.code + ')',
id: item.id
});
});
return list;
}
}
}).bind('typeahead:selected', function (obj, datum) {
$(this).parent().parent().find("input[type='hidden']").val(datum.id);
});
});
因此,当我动态添加其他输入预先输入时,它不起作用(即使在加载页面时创建的输入,它也适用于基本 $(".typeahead).typeahead...)
非常感谢你的帮助 !
09-17 编辑:
目前建议列表有效,但bind('typeahead:selected,...
没有
这是我编辑的代码:
function initPlaceTypeahead() {
$(".placeTypeahead").typeahead({
limit : 20,
remote : {
url: '/ajax/places/?query=',
replace: function(url, encodedUrl) {
return url + encodedUrl + '&categorySon=5';
},
filter: function (result) {
var list = [];
result.aaData.map(function (item) {
list.push({
value: item.name + ' (' + item.code + ')',
id: item.id
});
});
return list;
}
}
}).bind('typeahead:selected', function (obj, datum) {
$(this).parent().parent().find("input[class='delivery']").val(datum.id);
});
}
$('#addCity').click(function() {
var lastFilled = $("#delivery tr input[type='hidden']").last().val();
if (lastFilled === '') {
alert("La ville est obligatoire.");
$("#delivery tr input[class='typeahead tt-query']").last().focus();
} else {
$("#delivery tr").eq(1).clone().find("input").each(function() {
$(this).val('')
.attr('placeholder', '');
}).end().appendTo("#delivery");
$("#delivery tr a").removeClass("resetCity");
$("#delivery tr a").addClass("delCity");
$("#delivery tr").eq(2).clone().find("input").each(function() {
$(this).val('').attr('placeholder', 'Informations Complémentaires');
}).end().appendTo("#delivery");
initPlaceTypeahead();
}
});