トークンの後にトリガーするjQueryオートコンプリートプラグイン

Question

私はアプリケーションを構築しており、Twitter/Facebookが@ [name]を使っているのと同じように、テキストエリア内でオートコンプリートを行いたいと考えています。しかし、私は[TID：x]と入力するとトリガーしたいと思います。ここで、xは任意の長さの整数です。

Twitter/Facebookは、@記号を押すとオートコンプリートを開始し、オートコンプリートの後にテキストデータを送信します。 jQuery UIプラグイン（または他のプラグイン）がこれを何かできるかどうかは誰にも分かりますか？

Answer 1

これは確かに可能です。あなたはこれを実現するためにオートコンプリートウィジェットのイベント（searchとselect）を活用することができます

var triggered = false; 
var trigger = "TDI:"; 

$("input").autocomplete({ 
    source: [...], 
    search: function() { 
     if (!triggered) { 
      return false; 
     } 
    }, 
    select: function(event, ui) { 
     var text = this.value; 
     var pos = text.lastIndexOf(trigger); 

     this.value = text.substring(0, pos + trigger.length) + 
      ui.item.value; 

     triggered = false; 

     return false; 
    }, 
    focus: function() { return false; }, 
    minLength: 0 
}).bind("keyup", function() { 
    var text = this.value; 
    var len = text.length; 
    var last; 
    var query; 
    var index; 

    if (triggered) { 
     index = text.lastIndexOf(trigger); 
     query = text.substring(index + trigger.length); 
     $(this).autocomplete("search", query); 
    } 
    else if (len >= trigger.length) { 
     last = text.substring(len - trigger.length); 
     triggered = (last === trigger); 
    } 
}); 

ここにデモ：http://jsfiddle.net/andrewwhitaker/kCkga/

注：

• これは非常に限らデモです。文字列の途中でオートコンプリートしようとするとうまくいきません。
• この例を完成させるには、入力フィールドにカーソルの位置を見つけてそこにテキストを挿入する作業が必要です。
• おそらく他のバグかもしれませんが、間違いなく実行可能だと思います。これはあなたが始めることを願っています。

Answer 2

jQuery-UIオートコンプリートとアンドリューの例を使用しているプラ​​グインを作成しました（ありがとうございます）。

URL：https://github.com/experteer/autocompleteTrigger

デモ：ベストhttp://jsfiddle.net/dmattes/2YRgW/1/

$('input,textarea').autocompleteTrigger({ 
    triggerStart : '@', 
    triggerEnd: '', 
    source: [ 
    "Asp", 
    "BASIC", 
    "COBOL", 
    "ColdFusion", 
    "Erlang", 
    "Fortran", 
    "Groovy", 
    "Java", 
    "JavaScript", 
    "Lisp", 
    "Perl", 
    "PHP", 
    "Python", 
    "Ruby", 
    "Scala", 
    "Scheme" 
    ] 
}); 

、 ダニエル