jquery @mentions輸入ajax函數

Question

我試圖使用http://podio.github.com/jquery-mentions-input/將@mentions功能添加到我的網站。我正在嘗試使用ajax從查詢數據庫onkeyup的.php文件獲取JSON響應，但我不知道在代碼中放置ajax調用的位置。

我知道我要求的人基本上做的是爲我工作，但我在這裏死去，我一直在想這個約2-3天

這裏有從插件兩個JavaScript函數，我只是一個示例ajax函數，它將鏈接到我的PHP腳本，該腳本搜索用戶%LIKE%查詢。

BASIC例如，從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實例（我不知道如何從一個PHP文件獲取JSON）

$(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

我理解了它，我只是加入查詢的值的變量的查詢，並將其發送到我的腳本，該腳本然後搜索分貝併發送回結果

$('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

我已經閱讀了關於該插件有點在Gitpage上，我不確定你有什麼，但這是你需要使它工作的：

jQuery js文件和插件腳本。

JS代碼：在文件夾資產

$(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文件的文件名data.json資產/ data.json「：

[ 
    {   
     "id": 1, 
     "name": "Kenneth Auchenberg", 
     "avatar": "http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif", 
     "type": "contact"  
    } 
] 

現在，所有你需要的是用一個textarea上課提到 - 例2。您可能需要一些包含as的css文件。但嘗試一下，回來反饋。

Answer 3

我這是怎麼做的笨

創建一個函數，將得到的數據對我來說

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

然後調用庫中的文件準備

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