Add demo for using ajax to set the users array

[hadees]

Could you add an example for using mention.js with a function setting the users array?

[jaykappa]

Simple solution. Replace:
$("#light").mention({ ... });

with:

$.getJSON('ajaxFile.php', function(data) {
$("#light").mention({
delimiter: '@',
users: data
});
});

PHP file as such, change results array to loop for your query as necessary:
header('Content-Type: application/json');
$results = array();
$results[] = array( 'username' => 'dave');
$results[] = array( 'username' => 'francis');
$results[] = array( 'username' => 'donald');
$results[] = array( 'username' => 'collin');
$results[] = array( 'username' => 'conrad');

echo json_encode($results);

[dsteplight]

I think it would be a good idea if $.getJSON('ajaxFile.php', function(data) .... was inside of a function call like getNewData(string) { }.... this way the getNewData() could be called every time on the onkeyup event so you can get a filtered result set from ajaxFile.php .

[jaykappa]

agreed! Was looking to implement that exact solution to build out a dynamic result set.

However can't seem to find a working demo solution, which would pass to PHP a data string (in this case the portion of the username). A onkeyup example would be great. Anything already available?

[dsteplight]

I just discovered mention.js yesterday. I feel pretty confident that I can create a working example for you @jaykappa . I'll post a link this week or work on a way to update the actual plugin

[jaykappa]

Amazing, I've got a very pedestrian solution in the works which I'll also post later this week. But involved altering mention.js as opposed to working with it. Biggest problem I had was initiating passing the query.string from "_matcher" and then resetting itemProps in _matcher with the new dataset.

[jaykappa]

http://www.jay-kapadia.com/mention/demo.html

There's a working demo, however please note this is very bad code and should be re-structured. I can't stress that enough. Also mention.js was altered by adding an ajax call and ajax url to the settings. This call is made in the _sorter function as I found it to be most stable place to change the source data.

To prevent async it's turned off and then back on in the created _updateSource function.

Because the method and code isn't super clean I didn't put it on GitHub, hoping someone can clean this up.

in the PHP file I used the same code as above to return the JSON and "qUser" is the query string to run a "LIKE" search for output (just as a reference).

[mnask]

im using your plugin , thank you for good job , but why its hang ? when i start typing , it hang till i get result from backend

[jaykappa]

Are you using the version based on ajax? If you are then probably because the hack created wasn't coded optimally, other issues could be how fast your database returns results. The code could surely still be cleaned up to be more optimized, I'm hoping someone will take the time to do so in the near future.

[mnask]

yes , based on ajax , and i wish you will fix this .really your plugin very good , i have seen other plugins , but i liked your plugin more , but it will be perfect if this issue will be fixed .
i would like to fix the issue , but to be honest , i dont know exactly what causing this

thank you

[jaykappa]

Sorry mnask, I wish I could spend some more time to take it to the next level, but I'm swamped with my own projects at the moment.

Here's hoping someone out there on GitHub sees this and can help, fingers crossed.

[iyzl]

user result unique setting is not working :)

[AntoineTurmel]

@jaykappa
To avoid the lag maybe you need to let async true and use debounce ?
I did several try but not successful :(

[jaykappa]

I'll try to put the debounce in the bootstrap class during the on focus. That should help.

On Wednesday, 14 October 2015, Antoine Turmel [email protected]
wrote:

@jaykappa https://github.com/jaykappa
To avoid the lag maybe you need to let async true and use debounce ?
I did several try but not successful :(

—
Reply to this email directly or view it on GitHub
#10 (comment)
.

• Jay Kapadia*
  416.564.4954

[AntoineTurmel]

@jaykappa
I tried, but doesn't work... it should debounce when the user type something.

[AntoineTurmel]

@jaykappa
I somehow manage to get debounce working when putting the code into "lookup" section but it's not perfect as it's still fetching the URL for each key pressed.
https://gist.github.com/AntoineTurmel/3513a0cd7f0fc9ca0e1d#file-bootstrap-typeahead-js-L95

Any clue ?

[jaykappa]

@AntoineTurmel I've been playing around but no success yet. It should be set on the listener I thought prior to/on a keypress but failed. I can probably squeeze some time in this weekend to dive in a bit

[AntoineTurmel]

Using setTimeout is better and works well :)
https://gist.github.com/AntoineTurmel/3513a0cd7f0fc9ca0e1d#file-bootstrap-typeahead-js-L254

[jaykappa]

Boom well done! I still didnt have a adjust code myself, Sorry @AntoineTurmel - but I'll test this out asap!

[Theo4]

Hi there! Do you have a working example of this Ajax call? @AntoineTurmel @jaykappa
Nice job,

[jaykappa]

@Theo4 I haven't changed the demo in three years but here's a link:
http://www.jay-kapadia.com/mention/demo.html