jquery #mentions input ajax function - php

Question

I am trying to use http://podio.github.com/jquery-mentions-input/ to add the #mentions functionality to my website. I'm trying ajax to get a JSON response from a .php file that queries the database onkeyup, but I don't know where in the code to put the ajax call.
I know I am asking for people to basically do the work for me, but I am dying here, I have been trying this for about 2-3 days now
here are two JavaScript functions from the plugin, I just an example ajax function that would link to my PHP script that searches for users %LIKE% the query.
BASIC EXAMPLE FROM PLUGIN
$(function () {
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:7, name:'kenneth#auchenberg.dk', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:8, name:'Pete Awesome Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
{ id:9, name:'Kenneth Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
];
data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, data);
}
});
$('.get-syntax-text').click(function() {
$('textarea.mention').mentionsInput('val', function(text) {
alert(text);
});
});
$('.get-mentions').click(function() {
$('textarea.mention').mentionsInput('getMentions', function(data) {
alert(JSON.stringify(data));
});
}) ;
});
AJAX EXAMPLE(i don't know how to get the JSON from a .php file)
$(function () {
$('textarea.mention-example2').mentionsInput({
onDataRequest:function (mode, query, callback) {
$.getJSON('assets/data.json', function(responseData) {
responseData = _.filter(responseData, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, responseData);
});
}
});
});

Answer 1

i figured it out, i just added a variable query with the value of query, and sent it to my script, which then searches the db and sends back the result
$('textarea.mention-example2').mentionsInput({
onDataRequest:function (mode, query, callback) {
var myquery = 'query='+query;
$.getJSON('data.php', myquery, function(responseData) {
responseData = _.filter(responseData, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, responseData);
});
}
});

Answer 2

I have read up a bit on the plugin on the Gitpage, I am not sure on what you have, but this is what you need to make it work:
jQuery js file, and the plugin script.
JS Code:
$(function () {
$('textarea.mention-example2').mentionsInput({
onDataRequest:function (mode, query, callback) {
$.getJSON('assets/data.json', function(responseData) {
responseData = _.filter(responseData, function(item) {
return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 }); callback.call(this, responseData);
});
}
});
});
JSON file in the folder assets with the filename data.json 'assets/data.json':
[
{
"id": 1,
"name": "Kenneth Auchenberg",
"avatar": "http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif",
"type": "contact"
}
]
Now all you need is a textarea with the class mention-example2. You might need some css files include aswell. But try this out and come back with feedback.

Answer 3

this is how i did in codeigniter
create a function that will get the data for me
function getDataMention(mode, query, callback){
var path = '<?=site_url()?>users/get_user_search_string/'+query;
$.ajax({
url: path,
dataType: 'json', // Choosing a JSON datatype
}).done(function(retdata) {
var data = retdata;
data = _.filter(data, function(item) {return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, data);
});
}//end getDataMention();
then call the library on document ready
$('textarea.mention').mentionsInput({
onDataRequest:getDataMention,
minChars: 1,
templates:{
wrapper: _.template('<div class="mentions-input-box"></div>'),
autocompleteList: _.template('<div class="mentions-autocomplete-list"></div>'),
autocompleteListItem: _.template('<li data-ref-id="<%= id %>" data-ref-type="<%= type %>" data-display="<%= display %>"><%= content %></li>'),
autocompleteListItemAvatar : _.template('<img src="<%= avatar %>" />'),
autocompleteListItemIcon: _.template('<div class="icon <%= icon %>"></div>'),
mentionsOverlay: _.template('<div class="mentions"><div></div></div>'),
mentionItemSyntax: _.template('#[<%= value %>](<%= type %>:<%= id %>)'),
mentionItemHighlight: _.template('<a target="__blank" class="mlink" href="<?=site_url()?>users/profile/profile_id=<%= id %>"><%= value %></a>')
}
});