2016-06-13 4 views
-1

のような特殊文字で始まるときにテキストボックスをオートコンプリートします。特殊文字の型を入力すると自動補完するソリューション(jqueryが望ましい)を探しています。例えば:jqueryは、@

「@name」名リスト で名前を検索「#tagname」タグリスト内の値を検索 「$タスク」私がしたい場合は、タスクリストだから、

から値を検索 「@peter $ sales #new #opportunity」

私はいくつか私を助けてくれることを願っています。私はそこにjquery(または同様の)プラグインがあると仮定します。

+0

ニースつを含みます!私は言わなければならないだろう。それでもあなたが試したことを何でも追加してください。 – Jai

+0

私はそのような解決策を以前見たことがあり、そのようなことをするjqueryプラグインを見つけようとしました。私はそこに標準のソリューションがあると思います。 – Jeffrey

答えて

0

私はgithub:https://github.com/yuku-t/jquery-textcompleteの解決策を見つけました(この素晴らしいプラグインを作成してくれてありがとう!)。

まず <script src="path/to/jquery.js"></script> <script src="path/to/jquery.textcomplete.js"></script>

HTML

<textarea class="form-control" id="textarea" rows="4" style="position: relative; outline: 0px; background: transparent;"></textarea>

スクリプト

$('textarea').textcomplete([{ 
id: 'words', 
match: /(^|\b)(\w{2,})$/, 
search: function (term, callback) { 
    var words = ['google', 'facebook', 'linkedin']; 
    callback($.map(words, function (word) { 
     return word.indexOf(term) === 0 ? word : null; 
    })); 
}, 
replace: function (word) { 
    return word + ' '; 
} 
}, 
    { 
    id: 'names', 
    mentions: ['peter','steven', 'jeffrey', 'paul'], 
    match: /\[email protected](\w*)$/, 
    search: function (term, callback) { 
     callback($.map(this.mentions, function (mention) { 
      return mention.indexOf(term) === 0 ? mention : null; 
     })); 
    }, 
    index: 1, 
    replace: function (mention) { 
     return '@' + mention + ' '; 
    } 
}, 
{ 
    id: 'tasks', 
    tasks: ['invoice','call', 'email', 'put on hold'], 
    match: /\B#(\w*)$/, 
    search: function (term, callback) { 
     callback($.map(this.tasks, function (task) { 
      return task.indexOf(term) === 0 ? task : null; 
     })); 
    }, 
    index: 1, 
    replace: function (task) { 
     return '#' + task + ' '; 
    } 
} 
         ]); 

チェックhttp://codepen.io/jmdejongh/pen/EyKQrZ