我已将 typeahead 附加到一系列输入框。当从预先输入列表中选择项目时,我还使用更新器函数将关联值添加到隐藏输入。我当前的代码如下。
HTML:
<div id="iwrapper" class="currentIng">
<input type="hidden" name="ingredientId[]">
<input type="text" name="ingredient[]" id="ingredient11" class="ingLeft ingName" autocomplete="off">
</div>
Javascript:
$(function() {
var labels, mapped;
$('.ingName').typeahead({
source: function(query, process) {
labels = [];
mapped = {};
var data = [{"iname":"Almond","ingid":"1","mabbr":"LOR"},{"iname":"Amaretto","ingid":"2","mabbr":"LOR"}, etc];
$.each(data, function(i, ing) {
var query_label = ing.iname + ' [' + ing.mabbr + ']';
mapped[query_label] = ing;
labels.push(query_label);
});
process(labels);
},
updater: function(query_label) {
var ing = mapped[query_label];
var input_label = ing.ingid;
$("ul.typeahead.dropdown-menu:visible").siblings("input[type='hidden']").val(input_label);
return query_label;
}
};);
});
因此,如果用户开始输入 Almond,则会显示Almond [LOR] 。如果用户在列表中选择了该条目,则更新程序运行并且值1将被添加到隐藏的输入字段。这一切都很好。
问题: 如果用户输入整个值并点击离开输入,隐藏的输入值不会更新。
问题: 当输入字段失去焦点时,有什么方法可以更改我的代码以使更新程序运行?
这是一个工作示例,对可见性进行了一些小的编辑: JSFiddle