Bootstrap Typeahead - 在輸入模糊上運行更新功能？

我將typeahead附加到一系列輸入框中。我還使用updater函數將相關的值添加到隱藏的輸入中，當從typeahead列表中選擇一個項目時。我目前的代碼如下。Bootstrap 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; 
     } 
    };); 
});

所以，如果一個用戶開始輸入杏仁，杏仁[LOR]將顯示。如果用戶在列表中選擇了該條目，則運行更新程序並將值添加到隱藏的輸入字段中。這一切都很好。

問題： 如果用戶輸入整個值並點擊遠離輸入，則隱藏的輸入值不會更新。

問題： 有沒有什麼辦法可以改變我的代碼，使輸入字段失去焦點時更新運行？

這裏是一個工作示例，與可視性一些小修改： JSFiddle

來源

2013-03-31 Matt Shultz

在jsfiddle.net中創建一個實時演示。可能需要存儲數據超出插件初始化代碼，並在輸入失去焦點時執行手動搜索。不是100％清楚你在'typeahead.dropdown-menu'中試圖做什麼，因爲當輸入失去焦點和即時somone類型時，它將不可見，新的東西被清空並被新元素取代 – charlietfl

我更新了我的帖子，一個JSFiddle的鏈接。數據實際上是存儲在一個php變量之外的。爲了便於閱讀，我只包含了部分內容。 –

有一個解決方案，它正在使用'blur'工作並在自舉之外搜索數據。是可行的，只是沒有涵蓋所有的情況下測試的價值呢。看看你的想法http://jsfiddle.net/NW6pc/5/ – charlietfl

引導程序預輸入插件已經在引導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參數與過濾器函數結合使用;如果數據總是本地的，那麼如果你想繼續使用對象而不是字符串，你可以提供你自己的模板/引擎參數。上面的這段代碼至少包含了你最初詢問的模糊處理代碼，我希望這個插件有幫助。

來源

2013-08-26 05:31:57 carpeliam

Bootstrap Typeahead - 在輸入模糊上運行更新功能？

回答

相關問題