jquery自动完成文本框,当它以像@这样的特殊字符开头时

时间:2016-06-13 10:54:11

标签: jquery autocomplete textbox special-characters

我正在寻找一种解决方案(最好是jquery),只有当特殊字符中的类型时才能自动完成。 e.g:

“@ name”在名称列表中查找名称 “#tagname”在标记列表中查找值 “$ task”从任务列表中查找值

因此,如果我想将任务分配给我输入的人: “@peter $ sales #new #opportunity”

我希望有些人可以帮助我。我想那里有一个jquery(或类似的)插件。

1 个答案:

答案 0 :(得分:0)

我在github上找到了一个解决方案:https://github.com/yuku-t/jquery-textcomplete(感谢yuku-t编写这个漂亮的插件!)。

首先包括 <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: /\B@(\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