jQuery Tags Input Plugin

关键字：tag 标签 输入标签化

来自：http://xoxco.com/projects/code/tagsinput/

这是一个JQuery插件，输入字符，按回车，变标签。

基本原理：

标签框是一个大DIV叫tags_3_tagsinput，DIV里有显示标签的span和输入用的input。当你在input里面输入一些字符，按回车

就变成一个span显示标签，插在input前面。

强烈建议你，花上两个小时，下载它的DEMO，用firebug来调试，观察其对HTML DOM的影响。

功能：

除了生成标签外，还能对输入重复标签进行检查，和JQuery autocomplete插件配合实现自动完成功能。

它的可选项如下：

   $(selector).tagsInput({ 
  
   'autocomplete_url': url_to_autocomplete_api,//JQueryUI的自动完成插件，的目标地址 
  
   'autocomplete': { option: value, option: value},//这个去官网看吧 
  
   'height':'100px',//大DIV的高度 
  
   'width':'300px',//大DIV的宽度 
  
   'interactive': 
  true, 
  
   'defaultText':'add a tag',//默认输入框的文本提示 
  
   'onAddTag':callback_function,//添加标签时的事件函数 
  
   'onRemoveTag':callback_function,//移除标签时的事件函数 
  
   'onChange' : callback_function,//不大清楚 
  
   'removeWithBackspace' :  
  true,//自己看 
  
   'minChars' : 0, 
  
   'maxChars' : 0  
  // 
  if not provided there is no limit, 
  
   'placeholderColor' : '#666666'//自己看 
  
}); 
 

整个DEMO的代码：

       <link rel="stylesheet" type="text/css" href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" /> 
  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
  
    <script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script> 
  
    <!-- To test using the original jQuery.autocomplete, uncomment the following --> 
  
    <!-- 
  
    <script type='text/javascript' src='http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.min.js'></script> 
  
    <link rel="stylesheet" type="text/css" href="http://xoxco.com/x/tagsinput/jquery-autocomplete/jquery.autocomplete.css" /> 
  
    --> 
  
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script> 
  
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" /> 
  
     
  
     
  
    <script type="text/javascript"> 
  
         
  
         
  function onAddTag(tag) { 
  
            alert("Added a tag: " + tag); 
  
        } 
  
         
  function onRemoveTag(tag) { 
  
            alert("Removed a tag: " + tag); 
  
        } 
  
         
  
         
  function onChangeTag(input,tag) { 
  
            alert("Changed a tag: " + tag); 
  
        } 
  
         
  
        $( 
  function() { 
  
 
  
            $('#tags_1').tagsInput({width:'auto'}); 
  
            $('#tags_2').tagsInput({ 
  
                width: 'auto', 
  
                onChange:  
  function(elem, elem_tags) 
  
                { 
  
                     
  var languages = ['php','ruby','javascript']; 
  
                    $('.tag', elem_tags).each( 
  function() 
  
                    { 
  
                         
  if($( 
  this).text().search( 
  new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0) 
  
                            $( 
  this).css('background-color', 'yellow'); 
  
                    }); 
  
                } 
  
            }); 
  
            $('#tags_3').tagsInput({ 
  
                width: 'auto', 
  
 
  
                 
  // 
  autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui) 
  
                autocomplete_url:'test/fake_json_endpoint.html'  
  // 
   jquery ui autocomplete requires a json endpoint 
  
            }); 
  
             
  
 
  
 
  // 
   Uncomment this line to see the callback functions in action 
  
// 
              $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});         
  
 
  
 
  // 
   Uncomment this line to see an input with no interface for adding new tags. 
  
// 
              $('input.tags').tagsInput({interactive:false}); 
  
        }); 
  
     
  
    </script> 
  
        <form> 
  
            <p><label>Defaults:</label> 
  
            <input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p> 
  
             
  
            <p><label>Technologies: (Programming languages  
  in yellow)</label> 
  
            <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p> 
  
             
  
            <p><label>Autocomplete:</label> 
  
            <input id='tags_3' type='text' class='tags'></p> 
  
             
  
        </form> 
 

 该知道引用哪些文件了吧。就是JQuery，JQueryUI和其CSS，它自己的JS文件和CSS。