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

【问题标题】：Bootstrap Typeahead - Run updater function on input blur?Bootstrap Typeahead - 在输入模糊上运行更新程序功能？
【发布时间】：2013-03-31 21:42:54
【问题描述】：

我已将预先输入的内容附加到一系列输入框。当从预先输入列表中选择项目时，我还使用更新器函数将关联值添加到隐藏输入。我当前的代码如下。

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

【问题讨论】：

在 jsfiddle.net 中创建一个现场演示。可能需要将您的数据存储在插件初始化代码之外，并在输入失去焦点时进行手动搜索。不是 100% 清楚您在 typeahead.dropdown-menu 中尝试做什么，因为当输入失去焦点并且即时有人输入新内容时它不会可见，它会被清空并替换为新元素
我用一个指向 JSFiddle 的链接更新了我的帖子。数据实际上存储在外部的 php 变量中。为了便于阅读，我只包含了其中的一部分。
有一个正在使用的解决方案，使用blur 并在引导程序之外搜索数据。是可行的，只是还没有涵盖所有各种场景来测试价值。看看你的想法jsfiddle.net/NW6pc/5
这看起来很有希望。这个想法是在数组中搜索模糊的完全匹配。如果找到完全匹配，则找到匹配的对应 ingid，并将该 ingid 放在“隐藏”输入字段中。
对...现在只做视觉显示来调试。你能用这个跑吗？现在的主要问题是确保所有案例都包含if 以及当值不匹配时该怎么办。使用像jQueryUI 这样对开发人员更友好的自动完成功能会更容易，更容易挂钩

标签： jquery twitter-bootstrap input blur typeahead.js

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

【讨论】：