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。