这是一个 Tag 管理插件,用于 blog、cms 等需要用到 Tag 标签的后台。
本插件需要 typeahead.js 0.11.* 配合,主要用到 Bloodhound 功能,请使用者注意!
载入文件
<!-- jQuery 库 -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- typeahead -->
<link href="typeahead.css" type="text/css" rel="stylesheet">
<script src="typeahead.bundle.min.js" type="text/javascript"></script>
<!-- 插件 -->
<link href="baigoTag.css" type="text/css" rel="stylesheet">
<script src="baigoTag.min.js" type="text/javascript"></script>
表单 HTML
<form name="article_form" id="article_form" action="article.php">
<input type="text" name="article_tag" id="article_tag">
</form>
初始化并提交,如:
<script type="text/javascript">
var opts_tag = {
remote: {
url: 'tag.php?key=%KEY'
}
};
$(document).ready(function(){
// 初始化 baigoTag
var obj_tag = $('#article_tag').baigoTag(opts_tag);
});
</script>
远程查询必须在初始化时指定 remote.url
对象,可以用通配符,通配符的名称由 remote.wildcard
对象指定,默认为 %KEY
,上述例子中的 %KEY 会由 article_tag 表单值填充,也可以自行定义通配符的名称,如:
var opts_tag = {
remote: {
url: 'tag.php?key=%SEARCH',
wildcard: '%SEARCH'
}
};
$(document).ready(function(){
// 初始化 baigoTag
var obj_tag = $('#article_tag').baigoTag(opts_tag);
});
插件接受 json 对象的返回,如:
[
'年代', '分类', '北京'
]
插件会自动根据 Tag 输入框的 name
和 id
属性生成一个 id="{:id}_hidden"
形式的隐藏表单,其值为逗号 , 分隔的 Tag 列表,如:
<form name="article_form" id="article_form" action="article.php">
<input type="hidden" name="article_tag_hidden" id="article_tag_hidden" value="年代,分类,北京">
<input type="text" name="article_tag" id="article_tag">
</form>