テキストの途中でオートコンプリート（Google Plusなど）

Question

オートコンプリートを行うためのオプションがたくさんあります。それらのほとんどは、入力された最初の数文字で動作するようです。

Googleプラスでは、フォームフィールドにどこに問題があっても、オートコンプリートオプションは@とすぐに削除され、@の直後にある文字を使用してオートコンプリートがガイドされます。 （それもかなりいいですね）

誰かがこの種のことをするためにコードを共有しましたか？

誰かがこのおもちゃバージョンを実装しようとしている（例：jQueryの）ポインタを持っていませんか？

Answer 1

これはjQueryUI's autocomplete widgetで可能です。具体的には、お客様の要件を満たすようにthis demoを適応させることができます。ここでは例です：

function split(val) { 
    return val.split(/@\s*/); 
} 

function extractLast(term) { 
    return split(term).pop(); 
} 

var availableTags = [ ... ]; // Your local data source. 

$("#tags") 
// don't navigate away from the field on tab when selecting an item 
.bind("keydown", function(event) { 
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
}).autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     var term = request.term, 
      results = []; 
     if (term.indexOf("@") >= 0) { 
      term = extractLast(request.term); 
      if (term.length > 0) { 
       results = $.ui.autocomplete.filter(
       availableTags, term); 
      } 
     } 
     response(results); 
    }, 
    focus: function() { 
     // prevent value inserted on focus 
     return false; 
    }, 
    select: function(event, ui) { 
     var terms = split(this.value); 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(""); 
     return false; 
    } 
}); 

そして、ここでそれが働いている：http://jsfiddle.net/UdUrk/

あなたは（たとえば、リモートデータソースで動作するようにする方法など）任意のより多くの情報が必要なら、私に教えてください。

更新：リモートデータソース（StackOverflowのAPI）を使用した例を次に示します。http://jsfiddle.net/LHNky/。また、自動補完候補のカスタム表示も含まれています。

Answer 2

オートコンプリート検索イベントを使用して、テキストに@が含まれているかどうかを検出できます。 @でなければ、falseを返してオートコンプリートは機能しません。

例： $（ ".selector"）.autocomplete（{ 検索：機能（イベント、UI）{...} }）;

Answer 3

私はjQuery UIオートコンプリート機能に基づいてjQueryプラグインを作成しました。ここに私のソリューションです：

http://www.hawkee.com/snippet/9391/

あなたはこのようにそれを呼び出す：

$('#inputbox').triggeredAutocomplete({ 
    hidden: '#hidden_inputbox', 
    source: "/search.php", 
    trigger: "@" 
}); 

Answer 4

私はこのためのブートストラップのプラグインを書きました。フォームフィールドに@がどこにあっても機能します。それのcontentEditableのdivではなく、テキスト領域のためです：http://sandglaz.github.com/bootstrap-tagautocomplete/

Answer 5

アンドリュー・ウィテカーの答えを少しexpatiateするには、jQueryのUIオートコンプリートのsourceオプションは一度ドロップダウンリストに表示する項目を含む配列を指定するために使用されますウィジェットがトリガーされます。このような配列、そのような配列を返す関数、またはそのような配列を生成するリソースへのURLとして定義できます。

source場合が関数として定義され、関数のパラメータ、requestとresponseは、それぞれ、その戻りアレイを構成し、ウィジェットに供給助けるために使用することができます。特に、ユーザがtermにウィジェットが添付されている入力要素の値を含んでいるので、関数が呼び出されたときには、requestが関心事です。

ここで私はこれをどう見ていますか？関心のあるシンボルである@とカーソルの間のテキストを非常に簡単に解析してrequest.termとし、そのテキストを使用してウィジェットに供給するための配列を作成します。ただし、ブラウザ間で互換性のある方法で確実にカーソルを配置できるようにするには、少しの作業（または既製の機能を使用する）が必要です。

エミュレートしようとしている機能を提供する既存のプラグインをお探しの場合は、Mentionatorをご覧ください。それはうまく構造化され、従いやすい、そして豊富にコメントされているので、私が記述したアプローチをどのように取るかを理解することはほとんど問題にならないはずです。それはまた、本当にあなたによって維持されます:)。