これまでに投稿したタグを全ては覚えていられないので、タグのサジェスト機能があればいいなとずっと思っていたのですが、やっと実装できました。
jQueryプラグインでも様々なサジェスト機能がありますが、今回欲しかったのは下記の要件を満たすプラグインでした。
- 複数のタグを入力できる
- 候補にないタグも入力できる
jQuery Tag-it! というプラグインを利用することで実現することができました。
ダウンロードしたファイルとjQueryファイル、jQuery UI関連のファイルを読み込み
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/css/jquery.tagit.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/tag-it.min.js"></script>
// サジェスト候補のタグの出力します。
<?php
$ar_tags = wp_tag_cloud('format=array&number=-0');
foreach ($ar_tags as $tag) {
$elements[] = "'".strip_tags($tag)."'";
}
$taglist = implode(',', $elements);
?>
<script>
$(function(){
var sampleTags = [<?php echo $taglist; ?>];
$('#singleFieldTags').tagit({
availableTags: sampleTags,
singleField: true,
singleFieldNode: $('#user_post_tag')
});
});
</script>
出力と実行
<input type="hidden" name="user_post_tag" id="user_post_tag" value="<?php echo implode(',', $taglist);?>" />
<ul id="singleFieldTags"></ul>
出力ソース部分は利用しているフォームによって変更する必要があるかもしれません。
実際に動いているものが見たい方はぜひハックに登録して、ソースコードを投稿してみてくださいね。
