JQ模糊查询插件

//构造函数写法
;(function($,window,document,undefined){//注意这里的分号必须加
    //插件的全部代码
    var FazzSearch = function (ele, options) {
        // if(options =='undefinded' || options == Object )
        this.$element = ele,
        this.defaults = {
            //这里的this是JQuery对象
            triggerID: this.$element.attr("id"),
            fazzArr : [],
            searchArr: [],
            // methods: methods,
            listWidth: '100%',
            $this: ele,//提示当前对象的dom节点名称,这里的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。 
            listDom: null,
            selector: this.$element.attr("id")+'_item',
            isPos: false,
            isNeedBlurSetTime: false,
            itemCallback: function () {
                
            },
            callback: function () {
                
            },
        },
        this.opts = $.extend({}, this.defaults, options);
    }
    FazzSearch.prototype = {
        //初始化
        init : function(){
            var _this = this;
            return this.$element.each(function(){ //遍历匹配的元素及插件实例的所有元素，此处的this表示为jquery对象，而不是dom对象
                $(this).css({
                    
                })
                $(this).bind('input propertychange', function() {
                    _this.initData();
                });
                if(this.isNeedBlurSetTime){
                    $(this).on('blur',function(e){
                        var self = $(this);
                        var setT = setTimeout(function(){
                            self.siblings('.fazzSearchList').html('').hide();
                            console.log('失交');
                            clearTimeout(setT)
                        },300)
                    })
                }
            })
        },
        initData : function(){
            this.opts.listDom = this.opts.listDom ? this.opts.listDom : this.$element.next('.fazzSearchList');//如果出现兄弟节点有两个
            this.opts.fazzArr = [];
            this.initListDomStyle();
            this.adEventInputChange();
        },
        initListDomStyle : function(){
            var listDom = this.opts.listDom;
            listDom.html('');
            listDom.css({'width':this.$element.outerWidth()},{'padding':'10px 0 10px 6px'});
            if(("ontouchstart" in window)){
                listDom.css('width',this.$element.parent().outerWidth());
                if(listDom.hasClass('liPc')){
                    listDom.removeClass('liPc');
                }
                listDom.addClass('liMoblie');
            }else{
                if(listDom.hasClass('liMoblie')){
                    listDom.removeClass('liMoblie')
                }
                listDom.addClass('liPc');
            }
            console.log(this.$element)
            if(this.opts.isPos){
                listDom.parent().css('position','relative');
                listDom.addClass('liPcPosi');
                listDom.css('top',this.$element.outerHeight())
            }
        },
        //添加子节点
        addChild : function(item,selector){
            return "<li class='" + selector + "' data-val='" + item + "'>"+item+"</li>";
        },
        //如果输入值为空,清除缓存和数组dom
        closeData : function(){
            this.opts.fazzArr = [];
            this.opts.listDom.html('').hide();
        },
        //监听input输入框值改变
        adEventInputChange : function(){
            var fazzSearchValue = this.$element.val();//input输入框值改变
            console.log('fazzSearchValue->',fazzSearchValue)
            if(fazzSearchValue==''){
                this.closeData();
                return;
            }
            this.dealWithData(fazzSearchValue);
        },
        //处理子节点绑定点击事件
        listItemBindClick : function(){
            $('body').on('click',opts.selector,function(){
                
            })
        },
        //如果存在模糊数组
        hasData : function(item){
            var listDom = this.opts.listDom;
            listDom.show();
            listDom.append(this.addChild(item));
            this.opts.fazzArr.push(item);
        },
        //处理模糊数组匹配和子节点添加
        dealWithData : function(fazzSearchValue){
            var searchArr = this.opts.searchArr;
            for (var i = 0; i < searchArr.length; i++) {
                var result = searchArr[i].indexOf(fazzSearchValue);
                if( result > -1 && this.opts.fazzArr.indexOf(searchArr[i])== -1){
                    this.hasData(searchArr[i]);
                }
            }
        }
        
    }
     //在插件中使用Beautifier对象
    $.fn.fazzSearch = function(options){
            //创建Beautifier的实体
            //this为jQuery选中的元素集合
            var fazzSearch = new FazzSearch(this,options);
            //调用其beautify方法
            return fazzSearch.init();
            //以后在此处调用新的方法即可，格式为：
            //return beautifier.方法名()
    }
})(jQuery,window,document);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="./css/fazzSearchBox.css"/>
        <style type="text/css">
            *{margin: 0;padding: 0;}
        </style>
        <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/fazzExtend.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <input type="text" name="" id="fazzSearch" value="" class="fazzSearch"/>
        <ul class="fazzSearchList fazzSearchList1"></ul>
        
        <input type="text" name="" id="fazzSearch1" value="" class="fazzSearch"/>
        <ul class="fazzSearchList fazzSearchList2"></ul>
        <script type="text/javascript">
            // var arr=[{ id:1,val:"sss"},{ id:2,val:"bb"},{ id:11,val:"advvasc"},{ id:3,val:"a"},{ id:4,val:"c"},{ id:5,val:"d"},{ id:6,val:"x"},{ id:7,val:"5"},{ id:8,val:"4"}]
             $(function(){
                var arr = ['333','1111','aaa','bbb','c','b','z'];
                $('#fazzSearch').fazzSearch({
                    searchArr:arr,
                    listDom: $('.fazzSearchList1'),
                    isPos:true
                })
                $('#fazzSearch1').fazzSearch({
                    searchArr: arr,
                    listDom: $('.fazzSearchList2'),
                })
            });
        </script>
    </body>
</html>

.fazzSearch{outline: none;border: 1px solid #ccc;width: 80px;height: 40px;line-height: 40px;text-indent: 5px;}
.fazzSearchList{display: block;display: none;width: 100%;max-height: 120px;overflow-y: auto;border: 1px solid #F6F7F8;background-color: #ffffff;}
.fazzSearchList li{cursor: pointer;height: 30px;line-height: 30px;width: 97%;text-align: left;color: #222;border-bottom: 1px solid #CCCCCC;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; word-break: break-all;}
.fazzSearchNoData{padding: 0;color: red;}
.liPcPosi{position: absolute;top: 0;left: 0;}
.liPc li {color: #999;border-bottom: 1px solid #f1f1f1;}
.liPc li:last-child{border-bottom: 0;}
.liMoblie li {color: #999;border-bottom: 1px solid #f1f1f1;}
.liMoblie li:last-child{border-bottom: 0;}
.special{position: absolute;top: 0;left: 0;z-index: 100;}