jquery @mentions input ajax function

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);
});
}
});
});

use [this](http://stackoverflow.com/questions/13249282/send-data-on-button-click-from-javascript-to-database/13249487#13249487) for ajax call to server or php file — Sohail Ahmed, Feb 14 '13 at 12:41

score 2 · Accepted Answer · answered Feb 15 '13 at 18:27

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);
  });
}

});

score 0 · Answer 2 · answered Feb 14 '13 at 12:32

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.

score 0 · Answer 3 · answered Feb 03 '15 at 06:41

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>')
        }
      });

jquery @mentions input ajax function

3 Answers3