我正在尝试使用http://podio.github.com/jquery-mentions-input/在我的网站上添加@提及功能。我正在尝试ajax从一个查询数据库onkeyup
的.php文件中获取JSON响应,但我不知道在代码中放ajax调用的位置。
我知道我要求人们基本上为我做这项工作,但我在这里快要死了,我已经尝试了大约2-3天了
这里是插件中的两个JavaScript函数,我只是一个ajax函数示例,它将链接到我的PHP脚本,该脚本搜索用户%LIKE%
查询。
插件的基本示例
$(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);
});
}
});
});
我想好了,我只是添加了一个值为query的变量查询,并将其发送到我的脚本,然后脚本搜索数据库并返回结果
$('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);
});
}
});
我在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);
});
}
});
});
文件夹assets中的JSON文件,文件名为data.JSON"assets/data.JSON":
[
{
"id": 1,
"name": "Kenneth Auchenberg",
"avatar": "http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif",
"type": "contact"
}
]
现在,您只需要一个文本区域,其中包含类名示例2。您可能还需要一些css文件。但尝试一下,然后反馈。
这就是我在代码点火器中所做的
创建一个函数,为我获取数据
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>')
}
});