2

http://podio.github.com/jquery-mentions-input/を使用して、@mentions 機能を Web サイトに追加しようとしています。データベースを照会する .php ファイルから JSON 応答を取得するために ajax を試みていますonkeyupが、コード内のどこに ajax 呼び出しを配置するのかわかりません。

私は基本的に私のために仕事をするように人々に求めていることを知っていますが、私はここで死にかけています.私はこれを約2〜3日間試しています.

ここにプラグインの 2 つの JavaScript 関数があります。これは、ユーザー%LIKE%のクエリを検索する PHP スクリプトにリンクする ajax 関数の例です。

プラグインの基本的な例

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

3 に答える 3

2

私はそれを理解しました、私はクエリの値で変数クエリを追加し、それをスクリプトに送信しました。スクリプトは次にデータベースを検索して結果を送り返します

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

}）;

于 2013-02-15T18:27:46.370 に答える
0

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

ファイル名が data.json 'assets/data.json' のフォルダー assets 内の JSON ファイル:

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

ここで必要なのは、mention-example2 クラスのテキストエリアだけです。css ファイルのインクルードも必要になる場合があります。しかし、これを試してみて、フィードバックを返してください。

于 2013-02-14T12:32:38.383 に答える