• 下拉搜索框(兼容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 = $('<div id="' + 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,
                     _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 += '<span class="' + this.column[j] + '">' + item[this.column[j]] + '</span>';
                            };
                            if(this.settings.isdel){
                                row = $('<div class="item">' + name + '<i class="ats_del">✖</i></div>');
                            }else{
                                row = $('<div class="item">' + name + '</div>');
                            }
                        }
                        row.data('data', item)
                        this.content.append(row);
                    };
                    if(this.settings.isdel){
                        var delrow = $('<div class="item">'+this.settings.allDelText+'</div>');
                        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;
    });
    一辈子说长不长,说短不短,努力做好两件事:第一件事爱生活,爱身边的人,爱自己;第二件事是好好学习,好好工作,实现自己的人生价值观,而不仅仅是为了赚钱
  • 相关阅读:
    C#进阶-Linq-join
    C#进阶-Linq
    C#-string-stringBuilder
    C#-继承-多态
    Spring基础
    JQuery基本操作
    Oracle数据库基础操作
    AJAX前端后端
    AJAX异步提交(前端)
    js基本操作
  • 原文地址:https://www.cnblogs.com/dcyd/p/14863691.html
Copyright © 2020-2023  润新知