Question

我已将typeahead附加到一系列输入框。当从typeahead列表中选择一个项目时，我还使用updater函数向隐藏输入添加关联值。我目前的代码如下。

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;
       }
   };);
});

因此，如果用户开始输入杏仁，将显示杏仁[LOR] 。如果用户在列表中选择该条目，则更新程序将运行，并且 1 的值将添加到隐藏的输入字段中。这一切都很有效。

问题： 如果用户键入整个值并单击远离输入，则不会更新隐藏的输入值。

问题： 当输入字段失去焦点时，有什么方法可以改变我的代码以使更新程序运行？

以下是一个工作示例，其中包含一些可见性的小编辑： JSFiddle

Answer 1

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

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参数与过滤函数一起使用;如果数据始终是本地的，那么如果要继续使用对象而不是字符串，则可以提供自己的模板/引擎参数。上面的代码至少包括你最初询问的模糊处理代码，我希望这个插件有帮助。

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

1 个答案: