tokenize组件

Intro

标签式下拉框组件

Author

name: ZhanGu
concat:[email protected]

Options

tokenize 组件 
@param         {boolean}       readOnly 为true的时候，其他所有option失效 
@return        {string}        contain 默认为'.tokenize'，共有上下文 
@param         {string}        remove 如果为'no-remove'，表示不能删除 
@param         {number}        maxLength 最多可以输入多少个字符进行搜索，默认是10 
@param         {function}      overLimitCount 选择超过限制个数触发 
@return        {function}      existToken 已经存在标签触发 
@return        {function}      searchCallback 搜索后的回调函数 
@return        {function}      choiceCallback 选择token回调 
@return        {function}      removeCallback 移除token回调 

// html 结构如下：
// .tokenize > select + ul + .token > .token-item

自定义属性有：
data-showAll: 为空点击是否显示下拉，默认是 
data-create: 不存在token时，是否自动创建，默认是 
data-limitCount: 显示选择的个数，默认是无限

Usage

  <h2>示例一</h2>
    <div class="tokenize">
        <select multiple name="tokenize-demo" id="" class="hide">
            <optgroup label="这个示例是多级的">
                <option selected="selected" value="默认选中">默认选中</option>
                <option selected="selected" class="no-remove" value="d d d">默认选中,并且不能删除</option>
                <option class="no-remove" value="d d d">a默认不选中,选中就不能删除</option>
                <option value="点击弹出下拉">为空默认点击弹出下拉</option>
                <option value="不限制选择个数">默认不限制选择个数</option>
                <option value="多级是不能自动创建的">多级是不能自动创建的</option>
                <option value="一级默认是能创建">一级默认是能创建</option>
                <option value="支持限制token的字符长度，默认是20个">支持限制token的字符长度，默认是20个</option>
            </optgroup>
            <optgroup label="标题2">
                <option value="selected">selected表示默认选中</option>
                <option value="no-remove">no-remove表示不能删除</option>
                <option value="有个搜索回调函数也不错哦">有个搜索回调函数也不错哦</option>
            </optgroup>
        </select>
    </div>


    <h2>示例二<small>（输入a方便测试）</small></h2>
    <div class="tokenize" data-showAll="false" data-create="true" data-limitCount="2">
        <select multiple name="tokenize-demo" id="" class="hide">
            <option value="默认选中">a默认不选中</option>
            <option class="no-remove" value="d d d">a默认不选中,选中就不能删除</option>
            <option value="点击不弹出下拉">a为空点击不弹出下拉</option>
            <option value="限制选择个数">a限制选择个数2</option>
            <option value="一级默认是能创建">a一级默认是能创建</option>
        </select>
    </div>

    <script>
        var sc = 0;
        $('.tokenize').IUI('tokenize', {
            overLimitCount: function($err){
                console.log('只能选择' + $err.data('limitCount') + '个token')
            },
            existToken: function($err){
                var value = $err.find('input').val();
                console.log(value + '已经存在')
            },
            searchCallback: function(){
                console.log('搜索了' + (++sc) + '次')
            },
            choiceCallback: function(){
                console.log('选择了')
            },
            removeCallback: function(){
                console.log('移除了')
            }
        });

    </script>