jQuery UIオートコンプリートをタグプラグインと連携させるために

Question

私がインストールしたjQuery用のタグ付けプラグインがあります。これをjQuery UIのオートコンプリートと組み合わせたいと思います。

両方のプラグインは互いに独立して動作しますが、一緒に動作させるのに問題があります。 jsFiddleにサンプルを入れました。

http://jsfiddle.net/ciel/ecbjG/

あなたが一番下までスクロールすると、次の2つのプラグインや細かい他の作品のいずれかをコメントアウトすることができます。しかし、タグプラグインを有効にすると、オートコンプリートは機能しません。

私は間違いを犯している場所を誰かに教えてもらうことを望んでいました。

Answer 1

タグ付けプラグインは、IDとID tags_tagを持っている入力コントロールとタグをテキスト入力に置き換えられます。

タグ付けプラグインを入力コントロールにバインドした後、オートコンプリートプラグインをtags_tagにバインドする必要があります。

$('#tags').tagsInput(); 

$("#tags_tag").autocomplete({ 
    source: availableTags, 
    minLength: 2, 
    select: function(event, ui) { 
     // something will happen eventually ... 
    } 
}); 

更新
問題は、入力フォーカス（blurイベント）を失っている場合にタグ付けプラグインはタグを追加することです。このイベントは、オートコンプリートプラグインが入力の値を設定する前に発生します。そのため、プラグインは現在入力されている値（Pytなど）を受け取り、選択した値（Pythonなど）ではなくタグとして追加します。私はぼかしイベントを取り除き、この作業をするためにトリガしてキー入力（ "Enter"をシミュレート）しましたが、これは完全にハックです:) ...

多分、あなたはより深くタグ付けプラグインを勉強したいと思うかもしれません。私はそれがオートコンプリートのための設定を持っていることを見てきました。

var settings = jQuery.extend({ 
    ... 
    autocomplete: { 
     selectFirst: false 
    }, 
    ... 
}, options); 

参照：http://jsfiddle.net/ecbjG/5/（更新）