Jquery-metiony demo - user guide

This plugin focus on mention. If you wanna do fuzzy search + highlight search result, feel free integrate those plugin by your self

There are so many feature that need to improve. Currently, I do not use Jquery anymore, so no improvement of this repository will be made

These is textarea was transformed to div[contenteditable].
Try to type @John to mention anyone whose name John.
Use keyboard ← ↑ → ↓ or mouse to select.

Mention anyone by @name


$('textarea.mention1').mentiony({
    onDataRequest: function (mode, keyword, onDataRequestCompleteCallback) {

        var data = [
            { id:1, name:'Nguyen Luat', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:2, name:'Dinh Luat', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:3, name:'Max Luat', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:4, name:'John Neo', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:5, name:'John Dinh', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:6, name:'Test User', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:7, name:'Test User 2', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:8, name:'No Test', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:9, name:'The User Foo', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
            { id:10, name:'Foo Bar', 'avatar':'https://goo.gl/WXAP1U', 'info':'Vietnam' , href: 'http://a.co/id'},
        ];

        data = jQuery.grep(data, function( item ) {
            return item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1;
        });

        // Call this to populate mention.
        onDataRequestCompleteCallback.call(this, data);
    },
    timeOut: 0,
    debug: 1,
});

Use RESTAPI as data source


$('textarea[name="mention2"]').mentiony({
    onDataRequest: function (mode, keyword, onDataRequestCompleteCallback) {

        $.ajax({
            method: "GET",
            url: "js/example.json?query="+ keyword,
            dataType: "json",
            success: function (response) {
                var data = response;

                // NOTE: Assuming this filter process was done on server-side
                data = jQuery.grep(data, function( item ) {
                    return item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1;
                });
                // End server-side

                // Call this to populate mention.
                onDataRequestCompleteCallback.call(this, data);
            }
        });

    },
    timeOut: 500, // Timeout to show mention after press @
    debug: 1, // show debug info
});

Feel free to styling your mentioned items:


    #red-mention-item .mention-area .highlight a.mentiony-link {background: #ea0000}