先読みを使用すると、一致するユーザーの入力がどのように一致すると見えるのでしょうか？

Question

Twitter Typeahead（およびBloodhound）とJQueryを使用するWordpressプラグインプロジェクトに貢献しています。

このプラグインには、組織グループに関する情報が組み込まれています。ユーザーがデータベースに追加するグループの名前を入力すると、Typeahead/Bloodhoundは既存のグループに基づく提案（ポップアップ）を提供します。ユーザーがポップアップの候補からマウスまたは矢印キーを使用して既存のグループを選択するか、目的の自動完成グループ名が表示されているがユーザーによって部分的にのみ完了している場合は、Tabキーを押すと、一致が選択され、そのグループはデータベースから取り込まれます。これは動作する望ましい動作です。

ユーザーが新しいグループ名（Typeahead/Bloodhoundに一致するものが見つからない）を入力すると、グループ名とユーザーが入力した追加情報がデータベースに新しいグループを作成するために使用されます。この部分も機能します。

問題は、ユーザーが既存のグループの名前を入力するときに発生しますが、オートコンプリート/ポップアップの候補からグループを選択する代わりに、ユーザーはグループ名全体を入力し続け、タブを押すか、次のフィールド。ユーザーがこれを行うと、そのグループに関連するデータは自動入力されません。私は先行入力のドキュメントを読んだが、私は見ていないよ、私はどのように動作を変更できます任意のオプションまたはカスタムイベントを

$('input#group').typeahead(null, { 
     displayKey: 'value', 
     source: array_of_groups 
    }).on('typeahead:autocompleted typeahead:selected', function($e, group){ 
     $('input[name=website]').val(group.website); 
     $('input[name=email]').val(group.email); 
     $('input[name=phone]').val(group.phone); 
}); 

（または理解？）：JSファイルから

ライブラリは、オートコンプリート候補のすべての文字が既にユーザによって入力されたときにタブを処理します。 Typeahead/Bloodhoundに入力文字列がソース内の既存の値と一致するかどうかを確認する方法もありません。

私は基本的に再び一致を探してデータソースをループすると考えて同様の質問（Select value during onblur event when using typeahead）が見つかりました。私はこのようなものを実装することができるかもしれませんが、Typeahead/Bloodhoundとより緊密に統合されたソリューションを探しています。

私が見つけたもう1つの提案は、ぼかしにキーストローク（タブ）を挿入することですが、上で指摘したように、名前全体を入力した後のタブ移動は機能を起動していないようです。 Typeaheadカスタムイベントがトリガーされることはありません。

ここには、プロジェクトの関連部分を模倣したコードjsfiddleがあります。この抜粋では、ユーザーが正確な大文字と小文字を区別せずにグループの名前を入力すると、タブが実際に一致として適切な候補を取得することが分かった。しかし、ユーザーがグループの正確な名前を入力してヒットタブ（またはマウスをクリックして次のフィールドに移動）すると、先頭一致がトリガーされません。

私は、テンプレートと関数の組み合わせを使用する方法があるかどうかを詳しく見ていきますが、歓迎します。

Answer 1

Twitter Typeahead文書を調査した結果、私はカスタムイベントが先行入力と呼ばれるが見つかりました：変更：

先行入力：変更 - ネイティブ変更イベントの正規化されたバージョン。 入力がフォーカスを失って、 が元々フォーカスを受けてから値が変更されたときに発生します。

これを使用して、私は2つのイベントを作成しました。1つは、フォーカスが失われたためのもので、もう1つは、選択されたものです。

var myTypeahead = $('input#group').typeahead({ 
    minLength: 0, 
    hint: true 
}, { 
    displayKey: 'gname', 
    source: groups.ttAdapter() 
}); 

myTypeahead.on('typeahead:change', function($e, group) { 
    $.each(groupData, function() { 
    if (this["gname"].toUpperCase() === group.toUpperCase()) { 
     console.log("Match!"); 
     $('input[name=website]').val(this.gwebsite); 
     $('input[name=notes]').val(this.gname); 
    } 
    }); 
}); 

myTypeahead.on('typeahead:autocompleted typeahead:selected', function($e, group) { 
    // myTypeahead.off('typeahead:change'); 
    $('input[name=website]').val(group.gwebsite); 
    $('input[name=notes]').val(group.gname); 
}); 

ここでは改訂版jsfiddleです。