chosen.jquery.js插件拓展总结

jquery知识点总结

监听事件（事件委派）

.chosen-search input原本不存在，是动态写入HTML。所以必须将这个元素的事件委派到document元素，让document监
听到产生这个元素就赋予input事件（这里有兼容性问题，IE浏览器不支持input事件）。

$(document).on( 'input', '.chosen-search input' ,function(){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    var like = $('.chosen-search input').val();
                    chosenSelect(1 ,html , like )
                },3000);
            });

文本内容改变事件：contentchanged

jQuery的contents()方法获取到该元素的所有节点（包括文本节点）与获取子元素节点children()不同；text（）方法获
取的文本内容；

$(document).on( 'contentchanged', '.chosen-results' ,function(){
      $(this).find('.no-results').contents().text("没有匹配到数据").css('color','red');           
 });

触发元素事件或更新对象：trigger

$('.chosen-results').trigger('contentchanged');

jQuery获取元素滚动条高度

 $('.chosen-results').on( 'scroll', function(){
       var ulHeight     = $(this).height();  //元素高度
       var scrollTop    = $(this).scrollTop(); // 元素滚动条到顶部的高度
       var scrollHeight = $('.chosen-results')[0].scrollHeight - ulHeight;// 元素滚动条总高度
});

插件拓展内容代码

CSS部分（主要新增遮罩层、Loading图标）

<style>
        .chosen-drop-mask{
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.2;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10000;
            display: none;
            text-align: center;
        }
        .fa-spinner {
            position: relative;
            top: 50%;
        }
    </style>

HTML部分

<select name="platform_id" class="chosen-select1" defaulted="{{ request('platform_id' , '') }}"></select>

js部分

(function(chosenClass){
            // 在这里初始化选项会使得input框出现其他内容
            var html = "<option value='' >全部渠道</option>";
            var list;
            var current_page = 1;
            // 插件初始化
            $(chosenClass).chosen({search_contains: false,width:"25%" , no_results_text: '查找中...' });
            $('.chosen-search input').attr('placeholder' , '停顿3s自动开始搜索');
            $('.chosen-drop').append('<div class="chosen-drop-mask"><i class="fa fa-spinner fa-spin white bigger-250"></i></div>');
            // 默认选择第一页
            chosenSelect( 1 , html );
            // 事件委派， 监听插件搜索值改变，动态查询数据:输入完3秒后查询(input事件会有兼容性问题)
            var timer;
            $(document).on( 'input', '.chosen-search input' ,function(){
                clearTimeout(timer);
                timer = setTimeout(function(){ var like = $('.chosen-search input').val(); chosenSelect(1 ,html , like ) },3000);
            });
            $('.chosen-results').on( 'scroll', function(){
                var ulHeight     = $(this).height();
                var scrollTop    = $(this).scrollTop();
                var scrollHeight = $('.chosen-results')[0].scrollHeight - ulHeight;
                var html         = $(chosenClass).html();
                var like = $('.chosen-search input').val();
                if( scrollHeight - scrollTop < 5 && current_page < list.last_page ){ current_page ++; chosenSelect( current_page , html , like ); }
            });

            // 手动查询数据
            function chosenSelect( page , html , like   ){


                var defaulted = $(chosenClass).attr('defaulted');
                $('.chosen-search input').val(like).blur(); // 搜索框失去焦点
                $('.chosen-drop-mask').show();              // 遮罩层防止快速输入
                $.post('/common/platformchosen' ,{ page:page , like:like ,defaulted:defaulted , _token: $('[name=_token]').val() } , function(platform){ var data = platform.data; list = platform; //console.dir(platform) if( data.length === 0 ){ $(document).on( 'contentchanged', '.chosen-results' ,function(){ //$(this).find('.no-results').contents().text("没有匹配到数据").css('color','red'); $(this).find('.no-results span').html("没有查找到数据").css('color','red'); }); $('.chosen-results').trigger('contentchanged'); }else{ for( var key in data ){ html += '<option value="' +data[key].id+ '">'+ data[key].name + '</option>'; } $(chosenClass).html( html ).val(defaulted).trigger("chosen:updated"); // 重新加载选项 , 保留默认选项 ,刷新插件 } $('.chosen-search input').val(like).focus(); // 保留搜索值并获取焦点 $('.chosen-drop-mask').hide(); } )

            }
        })('.chosen-select1')