下拉搜索框(兼容ie8)
github上找到的然后自己稍微改了一下，省的后面要找找不到 地址
// 搜索下拉框 var flag = true ; (function(root, factory) { if (typeof exports === 'object') { //umd module.exports =factory($); } else { root.AutoSearch = factory(window.Zepto || window.jQuery || $); } })(this, function($) { function AutoSearch() {} AutoSearch.prototype = { init: function(settings) { var rnd = Math.random().toString().replace('.', ''); this.id = 'autosearch_' + rnd; this.settings = $.extend({ mutil: false, autoHide:true, isdel:false, allDelText:'清除全部记录' }, settings); this.input = $(this.settings.input); this.min = this.settings.min || 1; this.data = this.settings.data; this.valueObj = $(this.settings.valueObj || this.settings.input); //赋值项 this.valueName = this.settings.valueName || 'name';; //赋值项 this.valueNames = this.settings.valueNames || 'name';; //赋值项 this.target = $(this.settings.target || this.settings.input); //显示框 this.filterColumn = this.settings.filterColumn || ['name']; this.column = this.settings.column || ['name']; this.timer = null; this.content = null; this.mutilValueArr = []; this.mutilTextArr = []; this.createContent(); this.bindEvent(); }, bindEvent: function() { var _this = this; this.target.click(function(e) { if(!flag) { return } flag = false setTimeout(function() { flag = true },1000) if (_this.settings.autoShow) { _this.search(); } return false; }); this.input.on('focus', function(e) { var input = $(this); // _this.timer && clearInterval(_this.timer); // _this.timer = setInterval(function() { // if (input.data('old') != input.val()) { // _this.search(); // input.data('old', input.val()); // } // }, 25); _this.settings.focusCallback && _this.settings.focusCallback.call(_this, _this.input); }).on('keyup', function(e) { e.stopPropagation(e) var input = $(this); if (input.data('old') != input.val() && e.keyCode != 13) { _this.search(); input.data('old', input.val()); } //console.log(e.keyCode) }).on('blur', function(e) { e.stopPropagation() // if(_this.settings.autoHide){ // if (_this.timer) { // clearInterval(_this.timer); // } // var input = $(this); // setTimeout(function() { // _this.hide(); // if (input.attr('data-text') != input.val() && !_this.settings.mutil) { // _this.input.val(''); // _this.input.data('old','') // _this.valueObj.val(''); // _this.input.attr('data-text',''); // _this.input.attr('data-value',''); // _this.settings.resetCallback && _this.settings.resetCallback.call(_this, _this.input); // } // }, 500) // } // _this.settings.blurCallback && _this.settings.blurCallback.call(_this, _this.input); }).on('keyup', function(e) { e.preventDefault() e.stopPropagation() switch (e.keyCode) { case 40: { //down var i = $('.item.current', _this.content).index(); i++; i = Math.min($('.item', _this.content).size() - 1, i); var current = $('.item.current', _this.content); $('.item', _this.content).removeClass('current').eq(i).addClass('current'); if (current.size()) { var pos = $('.item.current', _this.content).position(); var ch = current.outerHeight(); if (pos.top + ch > $(_this.content).height()) { var st = $(_this.content).scrollTop(); st += ch; $(_this.content).scrollTop(st); } } break; } case 38: { //up var i = $('.item.current', _this.content).index(); i--; i = Math.max(0, i); $('.item', _this.content).removeClass('current').eq(i).addClass('current'); var current = $('.item.current', _this.content); if (current.size()) { var pos = $('.item.current', _this.content).position(); var ch = current.outerHeight(); var st = $(_this.content).scrollTop(); if (pos.top <= 0) { st -= ch; $(_this.content).scrollTop(Math.max(st, 0)); } } break; } case 13: { //enter $('.item.current', _this.content).trigger('click'); setTimeout(function() { _this.hide(); }, 50) _this.settings.enterCallback&&_this.settings.enterCallback.call(_this,this); break; } } }).on('keydown', function(e) { e.stopPropagation() if (e.keyCode == 13) { e.preventDefault(); } }); this.content.on('click', '.item', function(e) { e.stopPropagation() var data = $(this).data('data'); var text = $('span',this).text(); if (_this.settings.mutil == true) { _this.mutilTextArr.push(text); _this.mutilValueArr.push(data[_this.valueName]); _this.input.val(_this.mutilTextArr.join(',') + ','); _this.valueObj.val(_this.mutilValueArr.join(',') + ','); _this.input.attr('data-value', _this.input.attr('data-value')); _this.input.attr('data-text', _this.mutilTextArr.join(',') + ','); } else { _this.input.val(text); _this.valueObj.val(data[_this.valueName]); _this.input.attr('data-value', data[_this.valueNames]); if (_this.settings.valueObj) { _this.input.attr('data-text', text); } else { _this.input.attr('data-text', data[_this.valueName]); } } _this.settings.callback && _this.settings.callback.call(_this, data); _this.hide(); }).on('mouseover', '.item', function(e) { e.stopPropagation() $(this).addClass('current').siblings().removeClass('current'); }) $(document).click(function(e) { e.stopPropagation() _this.hide(); }); this.content.on('click', '.ats_del', function(e) { e.stopPropagation() //删除 var item = $(this).closest('.item'); _this.settings.delCallback && _this.settings.delCallback.call(_this,item); item.remove(); return false; }); }, createContent: function() { if ($('#' + this.id).size() == 0) { this.content = $('this.id + '" class="ui-autosearch-content"/>'); this.content.hide(); $('body').append(this.content); } }, show: function() { var _this = this; _this.content.show(); _this.content.css({ position: 'absolute', zIndex: _this.settings.zIndex || 999, width: _this.input.outerWidth() }); _this.setPostion(); _this.postimer = setInterval(function() { _this.setPostion(); }, 20); _this.settings.showCallback && _this.settings.showCallback.call(_this, _this.input, _this.content); }, hide: function() { this.postimer && clearInterval(this.postimer) this.content.hide() }, search: function() { var _this = this; var value = _this.input.val().split(',').pop(); var len = _this.getByteLen(value); if (len >= _this.min || _this.settings.autoShow) { if (typeof _this.data === "function") { //ajax _this.getData(); } else { var data = _this.filter(_this.data); _this.format(data); if(data.length){ _this.show(); }else{ _this.hide() } } } else { _this.hide(); } }, getData: function() { var _this = this; this.settings.data(function(data) { _this.format(data); _this.show(); }); }, format: function(data) { this.content.html(''); if (data) { for (var i = 0, l = data.length; i < l; i++) { var item = data[i]; var row = $(); if (this.settings.format) { row = $(this.settings.format.call(this, item)); } else { var name = ''; for (var j = 0, len = this.column.length; j < len; j++) { name += 'this.column[j] + '">' + item[this.column[j]] + ''; }; if(this.settings.isdel){ row = $('' + name + '?'); }else{ row = $('' + name + ''); } } row.data('data', item) this.content.append(row); }; if(this.settings.isdel){ var delrow = $(''+this.settings.allDelText+''); delrow.click(function(){ $(this).siblings('.item').find('.ats_del').trigger('click'); return false; }) this.content.append(delrow); } } }, filter: function(data) { var _this = this; var value = _this.input.val().split(',').pop(); var newData = []; for (var i = 0, l = data.length; i < l; i++) { var item = data[i]; for (var j = 0, len = _this.filterColumn.length; j < len; j++) { var v = item[_this.filterColumn[j]] if (v.toString().indexOf(value) != -1) { newData.push(item); } } } return newData; }, setPostion: function() { var _this = this; var offset = _this.input.offset(); _this.content.css({ top: offset.top + _this.input.outerHeight(), // top: offset.top - 206, left: offset.left }); }, getByteLen:function(val) { var len = 0; for (var i = 0; i < val.length; i++) { var patt = new RegExp(/[^\x00-\xff]/ig); var a = val[i]; if (patt.test(a)) { len += 2; } else { len += 1; } } return len; } } return AutoSearch; });