2

一連の入力ボックスに先行入力を追加しました。また、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;
       }
   };);
});

そのため、ユーザーが Almond と入力し始めると、Almond [LOR]が表示されます。ユーザーがリストでそのエントリを選択すると、アップデータが実行され、非表示の入力フィールドに値1が追加されます。これはすべてうまくいっています。

問題: ユーザーが値全体を入力し、クリックして入力から離れた場合、非表示の入力値が更新されません。

質問: 入力フィールドがフォーカスを失ったときにアップデーターを実行するようにコードを変更する方法はありますか?

以下は、可視性のためにいくつかのマイナーな編集を加えた実際の例です: JSFiddle

4

1 に答える 1

0

Bootstrap typeahead プラグインは、より豊富な機能を持つTwitter のtypeahead.js pluginによって Bootstrap 3 に置き換えられました。そのプラグインを使用したデモ コードを次に示します。

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 に答える