Jquery外掛(下拉框帶本地模糊搜尋值的外掛)jquery.searchableSelect.js
阿新 • • 發佈:2018-11-05
jquery.searchableSelect.css需要引入的js和Css
<script src="/js/plugins/searchableSelect/jquery.searchableSelect.js"></script>
<link href="/css/plugins/searchableSelect/jquery.searchableSelect.css" rel="stylesheet">
使用函式
$('select').searchableSelect();
jquery.searchableSelect.css
/* Author: David Qin E-mail: [email protected] Date: 2014-11-05 */ .searchable-select-hide { display: none; } .searchable-select { display: inline-block; min-width: 200px; height:34px; font-size: 14px; line-height: 1.428571429; color: #555; vertical-align: middle; position: relative; outline: none; background: #FFFFFF none; border: 1px solid #e5e6e7; border-radius: 1px; color: inherit; display: block; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 90%; font-size: 14px; } .searchable-select-holder{ /*padding: 0px;*/ /*background-color: #fff;*/ /*background-image: none;*/ /*border: 1px solid #ccc;*/ /*border-radius: 4px;*/ float:left; min-height: 12px; /*box-sizing: border-box;*/ /*-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);*/ /*box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);*/ -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; /*background: #FFFFFF none;*/ /*border: 1px solid #e5e6e7;*/ /*border-radius: 1px;*/ /*color: inherit;*/ /*display: block;*/ /*padding: 6px 12px;*/ /*transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;*/ /*width: 100%;*/ /*font-size: 14px;*/ } .searchable-select-caret { position: absolute; width: 0; height: 0; box-sizing: border-box; border-color: black transparent transparent transparent; top: 0; bottom: 0; border-style: solid; border-width: 5px; margin: auto; right: 10px; } .searchable-select-dropdown { position: absolute; background-color: #fff; border: 1px solid #ccc; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 4px; border-top: none; top: 28px; left: 0; right: 0; z-index: 9999999; } .searchable-select-input { margin-top: 5px; border: 1px solid #ccc; outline: none; padding: 4px; width: 100%; box-sizing: border-box; width: 100%; } .searchable-scroll { margin-top: 4px; position: relative; } .searchable-scroll.has-privious { padding-top: 16px; } .searchable-scroll.has-next { padding-bottom: 16px; } .searchable-has-privious { top: 0; } .searchable-has-next { bottom: 0; } .searchable-has-privious, .searchable-has-next { height: 16px; left: 0; right: 0; position: absolute; text-align: center; z-index: 10; background-color: white; line-height: 8px; cursor: pointer; } .searchable-select-items { max-height: 400px; overflow-y: scroll; position: relative; } .searchable-select-items::-webkit-scrollbar { display: none; } .searchable-select-item { padding: 5px 5px; cursor: pointer; min-height: 30px; box-sizing: border-box; transition: all 1s ease 0s; } .searchable-select-item.hover { background: #555; color: white; } .searchable-select-item.selected { background: #28a4c9; color: white; }
jquery.searchableSelect.js
// Author: David Qin // E-mail: [email protected] // Date: 2014-11-05 (function($){ // a case insensitive jQuery :contains selector $.expr[":"].searchableSelectContains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); $.searchableSelect = function(element, options) { this.element = element; this.options = options || {}; this.init(); var _this = this; this.searchableElement.click(function(event){ // event.stopPropagation(); _this.show(); }).on('keydown', function(event){ if (event.which === 13 || event.which === 40 || event.which == 38){ event.preventDefault(); _this.show(); } }); $(document).on('click', null, function(event){ if(_this.searchableElement.has($(event.target)).length === 0) _this.hide(); }); this.input.on('keydown', function(event){ event.stopPropagation(); if(event.which === 13){ //enter event.preventDefault(); _this.selectCurrentHoverItem(); _this.hide(); } else if (event.which == 27) { //ese _this.hide(); } else if (event.which == 40) { //down _this.hoverNextItem(); } else if (event.which == 38) { //up _this.hoverPreviousItem(); } }).on('keyup', function(event){ if(event.which != 13 && event.which != 27 && event.which != 38 && event.which != 40) _this.filter(); }) } var $sS = $.searchableSelect; $sS.fn = $sS.prototype = { version: '0.0.1' }; $sS.fn.extend = $sS.extend = $.extend; $sS.fn.extend({ init: function(){ var _this = this; this.element.hide(); this.searchableElement = $('<div tabindex="0" class="searchable-select"></div>'); this.holder = $('<div class="searchable-select-holder"></div>'); this.dropdown = $('<div class="searchable-select-dropdown searchable-select-hide"></div>'); this.input = $('<input type="text" class="searchable-select-input" />'); this.items = $('<div class="searchable-select-items"></div>'); this.caret = $('<span class="searchable-select-caret"></span>'); this.scrollPart = $('<div class="searchable-scroll"></div>'); this.hasPrivious = $('<div class="searchable-has-privious">...</div>'); this.hasNext = $('<div class="searchable-has-next">...</div>'); this.hasNext.on('mouseenter', function(){ _this.hasNextTimer = null; var f = function(){ var scrollTop = _this.items.scrollTop(); _this.items.scrollTop(scrollTop + 20); _this.hasNextTimer = setTimeout(f, 50); } f(); }).on('mouseleave', function(event) { clearTimeout(_this.hasNextTimer); }); this.hasPrivious.on('mouseenter', function(){ _this.hasPriviousTimer = null; var f = function(){ var scrollTop = _this.items.scrollTop(); _this.items.scrollTop(scrollTop - 20); _this.hasPriviousTimer = setTimeout(f, 50); } f(); }).on('mouseleave', function(event) { clearTimeout(_this.hasPriviousTimer); }); this.dropdown.append(this.input); this.dropdown.append(this.scrollPart); this.scrollPart.append(this.hasPrivious); this.scrollPart.append(this.items); this.scrollPart.append(this.hasNext); this.searchableElement.append(this.caret); this.searchableElement.append(this.holder); this.searchableElement.append(this.dropdown); this.element.after(this.searchableElement); this.buildItems(); this.setPriviousAndNextVisibility(); }, filter: function(){ var text = this.input.val(); this.items.find('.searchable-select-item').addClass('searchable-select-hide'); this.items.find('.searchable-select-item:searchableSelectContains('+text+')').removeClass('searchable-select-hide'); if(this.currentSelectedItem.hasClass('searchable-select-hide') && this.items.find('.searchable-select-item:not(.searchable-select-hide)').length > 0){ this.hoverFirstNotHideItem(); } this.setPriviousAndNextVisibility(); }, hoverFirstNotHideItem: function(){ this.hoverItem(this.items.find('.searchable-select-item:not(.searchable-select-hide)').first()); }, selectCurrentHoverItem: function(){ if(!this.currentHoverItem.hasClass('searchable-select-hide')) this.selectItem(this.currentHoverItem); }, hoverPreviousItem: function(){ if(!this.hasCurrentHoverItem()) this.hoverFirstNotHideItem(); else{ var prevItem = this.currentHoverItem.prevAll('.searchable-select-item:not(.searchable-select-hide):first') if(prevItem.length > 0) this.hoverItem(prevItem); } }, hoverNextItem: function(){ if(!this.hasCurrentHoverItem()) this.hoverFirstNotHideItem(); else{ var nextItem = this.currentHoverItem.nextAll('.searchable-select-item:not(.searchable-select-hide):first') if(nextItem.length > 0) this.hoverItem(nextItem); } }, buildItems: function(){ var _this = this; this.element.find('option').each(function(){ var item = $('<div class="searchable-select-item" data-value="'+$(this).attr('value')+'">'+$(this).text()+'</div>'); if(this.selected){ _this.selectItem(item); _this.hoverItem(item); } item.on('mouseenter', function(){ $(this).addClass('hover'); }).on('mouseleave', function(){ $(this).removeClass('hover'); }).click(function(event){ event.stopPropagation(); _this.selectItem($(this)); _this.hide(); }); _this.items.append(item); }); this.items.on('scroll', function(){ _this.setPriviousAndNextVisibility(); }) }, show: function(){ this.dropdown.removeClass('searchable-select-hide'); this.input.focus(); this.status = 'show'; this.setPriviousAndNextVisibility(); }, hide: function(){ if(!(this.status === 'show')) return; if(this.items.find(':not(.searchable-select-hide)').length === 0) this.input.val(''); this.dropdown.addClass('searchable-select-hide'); this.searchableElement.trigger('focus'); this.status = 'hide'; }, hasCurrentSelectedItem: function(){ return this.currentSelectedItem && this.currentSelectedItem.length > 0; }, selectItem: function(item){ if(this.hasCurrentSelectedItem()) this.currentSelectedItem.removeClass('selected'); this.currentSelectedItem = item; item.addClass('selected'); this.hoverItem(item); this.holder.text(item.text()); var value = item.data('value'); this.holder.data('value', value); this.element.val(value); if(this.options.afterSelectItem){ this.options.afterSelectItem.apply(this); } }, hasCurrentHoverItem: function(){ return this.currentHoverItem && this.currentHoverItem.length > 0; }, hoverItem: function(item){ if(this.hasCurrentHoverItem()) this.currentHoverItem.removeClass('hover'); if(item.outerHeight() + item.position().top > this.items.height()) this.items.scrollTop(this.items.scrollTop() + item.outerHeight() + item.position().top - this.items.height()); else if(item.position().top < 0) this.items.scrollTop(this.items.scrollTop() + item.position().top); this.currentHoverItem = item; item.addClass('hover'); }, setPriviousAndNextVisibility: function(){ if(this.items.scrollTop() === 0){ this.hasPrivious.addClass('searchable-select-hide'); this.scrollPart.removeClass('has-privious'); } else { this.hasPrivious.removeClass('searchable-select-hide'); this.scrollPart.addClass('has-privious'); } if(this.items.scrollTop() + this.items.innerHeight() >= this.items[0].scrollHeight){ this.hasNext.addClass('searchable-select-hide'); this.scrollPart.removeClass('has-next'); } else { this.hasNext.removeClass('searchable-select-hide'); this.scrollPart.addClass('has-next'); } } }); $.fn.searchableSelect = function(options){ this.each(function(){ var sS = new $sS($(this), options); }); return this; }; })(jQuery);