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>

サンプル

※@skuareまたは@ptic_jpと打ってみてください。
Javascriptサンプルページ一覧

skuare.net