thinkphp整合tagit插件和jquery input tags几个插件比较

1：前言

　　业务需求，需要【添加文章】的功能，而在此功能中需要【添加标签】功能的实现，之前看过别的网站【添加标签】做的很炫，而且是那种能自己提示的那种。至少不是给一个input框:然后让你以逗号分开输入的那种，所以几经搜搜周折找到几款jquery插件，通过他们选择合适的供自己使用

2：比较

　　1：jquery tags input plugin 官网：http://xoxco.com/projects/code/tagsinput/　　这个插件是第一个让我心动的，有很炫的界面，有输入提示功能，以逗号分隔标签，但是提示功能有点不怎么匹配，而且他的提示数据放在一个网页中，不知道怎么搞的，笔者没怎么研究这个插件，应该代码中有配置项，我没有研究，希望有研究的朋友指点，这里有一篇博客讲这个插件的/article/4949859.html

　　


　　2：tag-it　　官网：http://aehlke.github.io/tag-it/　　这个插件不错，有炫的界面，能切换主题，刚接触到这个插件的时候，我jquery不是很懂，所以没有采用它

　　


　　3：jquery tagit　　官网http://jquery.webspirited.com/2011/02/jquery-tagit-a-jquery-tagging-plugin/　　经过2天的摸索，加上对jquery的渐渐熟悉，能够基本上看懂这个里面是怎么个原理了，开始结合thinkphp开干

　　首先又要一个ul标签

　　

<ul id="inputtags" style="width: 990px;"></ul></td>

然后在这个之前有javascript代码

<script type="text/javascript">
$(function() {
var availableTags = [ "cuowu",  "教程简介", "jquery教程",
"C", "C++", "错误",  "ColdFusion", "大家好",
"你是谁啊啊啊啊啊", "COBOL", "ColdFusion", "Erlang",
"Fortran", "Groovy", "Haskell", "Java",
"JavaScript", "PHP", "Python", "Ruby", "Scala",
"Scheme" ];

$('#inputtags').tagit({
tagSource : availableTags,
sortable : true,
initialTags : [ 'ahi' ],
});

});
</script>

availableTags这个数组是用来提示作用的，然后 tagSource : availableTags,说明他的tag源就是这个数组，然后sortable : true,是说明是否可以拖动排序，你可以试试，然后initialTags : [ 'ahi' ],是初始化数据，就是一加载就有的数据；他的详细配置都在tagit.js文件中，你可以详细看一下，比如

options:{
//Maps directly to the jQuery-ui Autocomplete option
tagSource:[],
//What keys should trigger the completion of a tag
triggerKeys:['enter', 'space', 'comma', 'tab','semicolon'],
//custom regex for splitting data
seperatorKeys: ['comma','semicolon'],
//array method for setting initial tags
initialTags:[],
//minimum length of tags
minLength:1,
//should an html select be rendered to allow for normal form submission
select:false,
//if false only tags from `tagSource` are able to be entered
allowNewTags:true,
//should tag and Tag be treated as identical
caseSensitive:false,
//should tags be drag-and-drop sortable?
//true: entire tag is draggable
//'handle': a handle is rendered which is draggable
sortable:false,
editable:false,
//color to highlight text when a duplicate tag is entered
highlightOnExistColor:'#0F0',
//empty search on focus
emptySearch:true,
//callback function for when tags are changed
//tagValue: value of tag that was changed
//action e.g. removed, added, sorted
tagsChanged:function (tagValue, action, element) {
;
},
maxTags:undefined,
//should 'paste' event trigger 'blur', thus potentially adding a new tag
// (true for backwards compatibility)
blurOnPaste:true
},

　　运行结果是



　　　　最后付上我的demo下载包地址，您可以到官方网站的demo下载http://pan.baidu.com/share/link?shareid=2674013010&uk=2215523190