jquery - Bootstrap Typeahead - 在输入模糊时运行更新程序功能？

Question

我已将 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

Answer 1

Bootstrap typeahead 插件已在 Bootstrap 3 中被 Twitter 的 typeahead.js plugin 取代。 ，具有更丰富的功能。这是使用该插件的一些演示代码:

function updater(event, suggestion) {
  console.log(suggestion.value);
}
$('.ingName').typeahead({local: ['abc', 'abd', 'def']});
// probably not necessary, if blur event is always fired
// $('.ingName').on('typeahead:selected', updater);
$('.ingName').on('blur', function(e) {
  var value = $(this).val(), datasets = $(this).data('ttView').datasets;
  for (var i = 0; i < datasets.length; i++) {
    var dataset = datasets[i];
    dataset.getSuggestions(value, function(suggestions) {
      for (var j = 0; j < suggestions.length; j++) {
        if (suggestions[j].value === value) {
          updater(e, suggestions[j]);
          return;
        }
      }
    });
  }
});

这不太适合您的数据，因为您有一个对象数组而不是字符串数组。如果您的数据来自 JSON 文件，那么您可以将 prefetch 参数与过滤器函数结合使用；如果数据始终是本地的，那么如果您想继续使用对象而不是字符串，则可以提供自己的模板/引擎参数。上面的代码至少包含了您最初询问的模糊处理代码，我希望这个插件能有所帮助。