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.
$('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,
});
$('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
});
#red-mention-item .mention-area .highlight a.mentiony-link {background: #ea0000}