2

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

4

1 回答 1

0

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

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

于 2013-08-26T05:31:57.007 回答