Facebookライクな@mentionができるJavaScript「jquery.mentionsInput」

Facebookライクな@mentionができるJavaScript「jquery.mentionsInput」サンプル Facebookでは@名前で候補が出てきて便利です。
今回紹介するjquery.mentionsInputはこのUIを実現するものです。

使用方法 jquery.mentionsInputからファイル一式をダウンロード。
<link href="jquery.mentionsInput.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="jquery.elastic.js"></script>
<script type="text/javascript" src="jquery.mentionsInput.js"></script>
<script>
$(function () {
$('textarea.mention').mentionsInput({
onDataRequest:function (mode, query, callback) {
var data = [
{ id:1, name:'skuare', 'avatar':'画像パス1', 'type':'contact' }, //ユーザー名1
{ id:2, name:'ptic_jp', 'avatar':'画像パス2', 'type':'contact' } //ユーザー名2
//ユーザー名に日本語は利用できないようです
];

data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

callback.call(this, data);
}
});
});
</script>

あとは表示させたい場所に下記を記述して完成です。
<textarea class='mention'></textarea>
Facebookライクな@mentionができるJavaScript「jquery.mentionsInput」サンプル

sponsors

「Facebookライクな@mentionができるJavaScript「jquery.mentionsInput」」をシェアする

記事作成:
記事URL:

TOP > > Facebookライクな@mentionができるJavaScript「jquery.mentionsInput」