Hi lodev09 , i want to use external resource for my mention feature
so i want to use like this
$('.mention-user').suggest('@', {
data: '/users.json',
map: function(user) {
return {
value: user.id,
text: ''+user.name+''
}
}
})
but nothing happen ,

Is there any way exists that we can update the itemlist (add a new item) after we have bind the element using suggest()?

Hi,
first of all thanks for this great plugin!

I just updated my jQuery to 2.2.0 and realised that it does not work anymore (there was an error saying on().()... is not a function. When I downgraded jquery back to 2.1.4 it worked again.

Cheers
Petros

Hi Team,

Thanks for your great plugin. I could not use with ajax. if i enter @ and some text , its not searching that term.
i tried exactly your code.. atleast i should see that ajax trigger point.. but i could not see any ajax triggering.

$('#AddNewCommentContent').suggest('@', { data: function(q, provide) { console.log(q); if (q) { $.getJSON("users/data.json", { q: q }, function(data) { // simply call provide and pass on your data! provide.call(data); }); } }, })
Thanks
Chandran

I have created a simple suggestion box, using this code:

$('#someElement').suggest('@', {
    data: function(q) {
        if (q) {
            return $.getJSON("some-url", { q: q });
        }
});

This works in general. However, if another character is typed before the AJAX request returns, then the data is displayed incorrectly. In my case, only the values which occur in both requests are displayed.

This issue could be addressed by abort()ing any pending XHR.

Is possible reload the configuration (with different data)?

I was trying to see if it works with contenteditable div. But it doesn't :(

i try to get json data from jQuery ajax. but it does not. only array of object usable.

It seems like there is not an easy way to detect which users have been selected and are present in the textarea as users can be deleted directly from the textarea.

Hi there, is it possible to suggest without the @ char?

So sorry for the question, I am a total newbee in this. Thank you so much

Hi, First of all, thank you for this awesome plugin. when I am using your plugin with prefetched data then it is working fine. Showing all the result

`$('.short_code').suggest('#', {
data: text_shortcuts_array,
map: function(text_shortcut) {
	return {
		value: text_shortcut.text,
		text: '<strong>'+text_shortcut.value+'</strong><br>'
	}
},
})`

But when I am using ajax for data things are not working fine for me. I don't know where I am doing wrong

$('.short_code').suggest('#', {
data: function(q, provide) {
	$.getJSON("/someurl", { q: q }, function(data) {

		text_shortcuts = data;
		var text_shortcuts_array = [];

		$.each(text_shortcuts, function (key, value) {
			text_shortcuts_array.push({
				value: value['Textshortcut']['shortcut'],
				text: value['Textshortcut']['text']
			});
		})
		<!-- I am getting value here -->
provide.call(text_shortcuts_array);
	});

},
map: function(text_shortcut) {
	return {
		value: text_shortcut.text,
		text: '<strong>'+text_shortcut.value+'</strong><br>'
	}
},
})`
```

Works with a WYSWYG editor?

Hello,

I try to find the good _function to edit to accept special caracter as éàç or -
Can you tell me how to ?

Thanks

Hey guys,

Great plugin! Is there a method for fetching current mentions in a textarea?

Hello, I have 2 ways to show the suggestion to the user using categorization and some data in the list consist of parent and the children category and some don't have a parent which means they are the parent category themselves.

Example data:

[{ val: "fastfoodrestaurant", meta: "Fast Food Restaurant" }, { val: "macdonald", meta: "Macdonald", parent: "Fast Food Restaurant" }, { val: "kfc", meta: "Kentucky Fried Chicken", parent: "Fast Food Restaurant" } ]

This is my partial settings
$('#input').suggest('#', { data: function(q) { return Categories.en; }, map: function(cat) { return { value: cat.val, text: function() { if (cat.parent) { return ( '<strong>#' + cat.meta + ' </strong>in<strong><em><small> ' + cat.parent + '</small></em></strong>' ); } else { return '<strong>#' + cat.meta + '</strong>'; } } }; }, filter: { casesensitive: false, limit: 6 }

when I type #Fast in the input field,
it shows me the autocomplete list like stated:
KFC in Fast Food Restaurant
Fast Food Restaurant
Macdonald in Fast Food Restaurant

Is there a way to prioritize the parent when first 3 letter match such as #fas and put Fast Food restaurant as the first item on the list?

This is not working at all with bootstrap 3. Working only on ver 4... Any suggestions? Is it possible to make it work on verison 3?

Like this Implementation. Nice work.

There is an error in the code - Line 420 in the JS.
var $this = $(this),

Should be a ; and not ,

Currently after typing #abcd, system will make 4 request to server side. 1 request for each character. I thought of using this function to add delay.

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this,
            args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

This is how I added the debounce function.

.suggest('#', {
       data:debounce(function(q){
                    if(q){
                            return $.post(url, {param:xyz})
                    }
        },700)
})
.map.......

With this I am successfully able to delay the calls to server by 700 millisecond. But the autocomplete list that shows up, does not come up. What is the best way to fix the issue.

Is there any way to know which item is removed from the text area?, like select2 works, using an unselect event.

Remove items from the dropdown when they have already been entered in the text area

First of all, thank you for plugin. I have a question. Can I use your plugin with emojionearea?

It would be nice if this didn't require bootstrap or carried around the optional css bits that are needed. This way this could be used in other places that aren't using bootstrap

I recently had an issue where if I clicked on a dropdown suggestion it would insert both my selection and whichever was at the top of the list. This only occurred on click and not when using the keyboard and the enter key. I looked into the click event handler and it appeared the event was being fired twice.
I have a PR ready to prevent this event propagation if necessary.

it would be nice if there was a way to style the selected text that's inserted into the textarea

Line 575 of bootstrap-suggest.js should be:
} else if (data && !(arg1 in data)) {

otherwise adding a second instance of Suggest to an element won't work:

$("#myTextarea").suggest("@", {
data: [{ username: "testuser", name: "Test User" }],
map: function(user) {
return {
value: user.username,
text: "<strong>" + user.name + "</strong>"
}
}
});

$("#myTextarea").suggest("#", {
data: [{ tag: "somehashtag", name: "Longer Hashtag Name" }],
map: function(hashtag) {
return {
value: hashtag.tag,
text: "<strong>" + hashtag.name + "</strong>"
}
}
});

Hi, and thank you for this excellent project.

Would it be possible to modify it to lazy load images, and if so how would you go about it? I'm ready to give it a try and open a PR.

In one of my projects I'm using it to insert emojis, but on page load my 1,000+ emojis are all loaded one by one, which is of course not ideal.

I've a Textarea it has 2 Suggest. but only 1 work.

How to fix it? Any Suggestion

hey lodev09, first of all: thanks for your work! really great plugin...

is it possible to tigger a suggest with just typing a letter? like on typeahead...
this would make your plugin perfect for a tag input.

thanks!

Need doc update on the gh page.

i have a text-area and want to define Multiple suggest phrase.
for example when a user type 'invoice:' this plugin should be activate and when user type 'customer:' this plugin should be activate from another source data
all of them should be activate in same text-area
can u have a solution for this?

My code:

<div class="form-group">
    <label for="comment">start typing with @</label>
    <div contenteditable="true" class="form-control default_message" rows="5" id="comment"></div>
 </div>

<link rel="stylesheet" href="/assets/vendors/bootstrap-suggest/bootstrap-suggest.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/caret/1.3.7/jquery.caret.js"></script>
<script src="/assets/vendors/bootstrap-suggest/bootstrap-suggest.min.js"></script>
<script>
const vars_default = [
    {
        name: 'nome_do_cliente',
        label: 'Nome do cliente'
    },{
        name: 'telefone_do_cliente',
        label: 'Telefone do cliente'
    },{
        name: 'numero_do_atendimento',
        label: 'Número do atendimento'
    },{
        name: 'data',
        label: 'Data'
    },{
        name: 'hora',
        label: 'Hora'
    },
    {
        name: 'posicao_fila',
        label: 'Posição na fila'
    },{
        name: 'tempo_medio_espera',
        label: 'Tempo médio de espera'
    },{
        name: 'fila_anterior',
        label: 'Nome da fila anterior'
    },{
        name: 'nome_agent',
        label: 'Nome do agente'
    },{
        name: 'qualificacao',
        label: 'Qualificacao'
    }
];

$('.default_message').suggest('#', {
 data: vars_default,
 map: function(_var) {
   return {
     value: _var.name,
     text: '<strong>'+_var.label+'</strong> <small>'+_var.name+'</small>'
   }
 }
})

</script>

is Ajax Supported?

I want to fetch result from AJAX how to do it with this Plugin?

This is My JSON data
[{"user_name":"admin","full_name":"Admin"},{"user_name":"admin1","full_name":"admin1"},{"user_name":"admin2","full_name":"admin2"}]

My JS Code
$('textarea').suggest('@', { data: $.post('/ajax/suggest',function(e){ return e; }), , map: function(user) { return { value: user.user_name, text: '<strong>'+user.user_name+'</strong> ' } } });

How to use it on wysihtml5 editor?

I've been using this repo in production for a while. I noticed this error yesterday and after doing some dissecting myself I can't seem to find the issue.

Below is the code I'm using:

$('.comment').suggest('#', { data: postIDReverse, map: function(id) { return { value: id, //id.value text: '<strong>'+id+'</strong>' //id.value } } })

'postIDReverse' corresponds to an array ["post35", "post34", "post33", "post31", "post30", "post28", "post26", "post25", "post24", "post23", "post22", "post21", "post20", "post19", "post18", "post17", "post16", "post15", "post14", "post13", "post12", "post11", "post10", "post9", "post8", "post7", "post6", "post5", "post4", "post3", "post2", "post1"]

The error I'm getting is from bootstrap-suggest.js. I provided a screenshot of the error.

Please let me know if you need any more information. I've been looking into this for a few hours, so I hope I'm not missing something simple.

Any guidance helps!

Hey,
I didn't know where to put suggestions (the link on the project site for "feedback" didn't lead me anywhere to leave feedback honestly, or I am blind) so I'm putting it here.
I am using this plugin now and it works great. The only thing I am missing is a better sensitivity. There is an old plugin that did a great job at filtering/sorting results based on the input:
https://github.com/jakiestfu/Mention.js#sensitivity

This worked much better in terms of ordering the results. Maybe your plugin can do this already but I couldn't find any option for it. Without it, I am left with either correct input (case sensitive) which isn't very practicable with names or no ordering of the results ("A" will return every name that contains an "a" or "A" but doesn't weigh the results).

If you don't think this would be a great addition, never mind :)