按字母分类的产品组件

组件效果：

输入搜索：

组件js代码：

/* *
 * 全局空间 SearchBox
 * */
var SearchBox = {};
/* *
 * 静态方法集
 * @name _method
 * */
SearchBox._method = {
    /* 选择元素 */
    $:function (arg, context) {
        var tagAll, n, eles = [], i, sub = arg.substring(1);
        context = context || document;
        if (typeof arg == 'string') {
            switch (arg.charAt(0)) {
                case '#':
                    return document.getElementById(sub);
                    break;
                case '.':
                    if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                    tagAll = SearchBox._method.$('*', context);
                    n = tagAll.length;
                    for (i = 0; i < n; i++) {
                        if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    },

    /* 绑定事件 */
    on:function (node, type, handler) {
        node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
    },

    /* 获取事件 */
    getEvent:function(event){
        return event || window.event;
    },

    /* 获取事件目标 */
    getTarget:function(event){
        return event.target || event.srcElement;
    },

    /* 获取元素位置 */
    getPosition:function (node) {
        var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
            scrolly = document.documentElement.scrollTop || document.body.scrollTop;
        var position = node.getBoundingClientRect();
        return {top:position.top + scrolly, right:position.right + scrollx, bottom:position.bottom + scrolly, left:position.left + scrollx }
    },

    /* 添加样式名 */
    addClass:function (c, node) {
        if(!node)return;
        node.className = SearchBox._method.hasClass(c,node) ? node.className : node.className + ' ' + c ;
    },

    /* 移除样式名 */
    removeClass:function (c, node) {
        var reg = new RegExp("(^|\s+)" + c + "(\s+|$)", "g");
        if(!SearchBox._method.hasClass(c,node))return;
        node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
    },

    /* 是否含有CLASS */
    hasClass:function (c, node) {
        if(!node || !node.className)return false;
        return node.className.indexOf(c)>-1;
    },

    /* 阻止冒泡 */
    stopPropagation:function (event) {
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    },
    /* 去除两端空格 */
    trim:function (str) {
        return str.replace(/^s+|s+$/g,'');
    }
};

//构造函数
SearchBox.init = function () {
    this.initialize.apply(this, arguments);
};

SearchBox.init.prototype = {

    constructor:SearchBox.init,

    initialize :function (options) {
        this.destroy();
        var input = options.inputId;
        var navItem = options.navItem;
        this.tip = options.tip || '';
        this.defaultText = options.defaultText;
        this.multipleSign = options.multipleSign;
        this.multipleData = [];
        SearchBox.toggleTab = options.toggleTab;
        SearchBox.onSearchValueChange = options.onSearchValueChange;
        SearchBox.attrTextModel = options.attrTextModel;
        SearchBox.contentList = options.contentList;
        SearchBox.searchData = options.searchData;
        this.currentPage = 1;
        this.searchValue = [];
        this.input = SearchBox._method.$('#'+ input);
        this.createNavbar(navItem);
        this.inputEvent();
    },

    scrollEvent: function(){
        var that = this;
        $(this.rootDiv).find('.item-box').scroll(function(){
            if($(this).scrollTop() == 0){    // 到顶了

                if(that.currentPage > 1){
                    that.currentPage--;

                    SearchBox.toggleTab(that.currentPage,that.index,function(data){
                        SearchBox.contentList = data;
                        that.createItemBox(true);
                    });
                }
            }else if(($(this).scrollTop() + $(this).outerHeight()) >= $(this)[0].scrollHeight){  // 到底了
                if (that.currentPage < that.pagination.totalPage) {
                    that.currentPage++;

                    SearchBox.toggleTab(that.currentPage,that.index,function(data){
                        SearchBox.contentList = data;
                        that.createItemBox(true);
                        $(this).scrollTop(10);
                    });
                }
            }
        });
    },

    scrollSearchEvent: function(){
        var that = this;
        $(this.rootDiv).find('.mCustomScrollbar').scroll(function(){
            var value = SearchBox._method.trim(that.searchInputValue);
            if($(this).scrollTop() == 0){    // 到顶了
                if(that.currentPage > 1){
                    that.currentPage--;

                    SearchBox.onSearchValueChange(value,that.currentPage,function(data){
                        SearchBox.searchData = data;
                        that.searchValue = SearchBox.searchData.data;
                        that.searchPagination = SearchBox.searchData.pagination;

                        that.createUl();
                    });
                }
            }else if(($(this).scrollTop() + $(this).outerHeight()) >= $(this)[0].scrollHeight){  // 到底了
                if (that.currentPage < that.searchPagination.totalPage) {
                    that.currentPage++;

                    SearchBox.onSearchValueChange(value,that.currentPage,function(data){
                        SearchBox.searchData = data;
                        that.searchPagination = SearchBox.searchData.pagination;

                        if(that.searchPagination.currentPage == that.searchPagination.totalPage && SearchBox.searchData.data.length < 10){
                            that.searchValue = that.searchValue.concat(SearchBox.searchData.data)
                        }else{
                            that.searchValue = SearchBox.searchData.data;
                        }

                        $(this).scrollTop(10);
                        that.createUl();
                    });
                }
            }
        });
    },

    destroy: function(){
        if($('.search-box-wrap')) {
            $('.search-box-wrap').remove();
        }
    },

    //创建navbar
    createNavbar: function(navItem){
        var _html = '';
        if(navItem && navItem.length){
            _html += '<ul>';
            _html += '<li class="on">'+ '热门' +'</li>';
            navItem.forEach(function(val, index){
                if(index==navItem.length-1){
                    _html += '<li>'+ '其他' +'</li>';
                }else{
                    _html += '<li>'+ val +'</li>';
                }
            });
            _html += '</ul>';
        }
        SearchBox.navItem = _html;
    },


    //生成BOX HTML 框架
    createWarp:function(element){
        var div = this.rootDiv = document.createElement('div');

        $(div).prepend("<input class='search-input-box' placeholder=' "+this.tip+" '/>");

        var that = this;
        // 设置DIV阻止冒泡
        SearchBox._method.on(this.rootDiv,'click',function(event){
            SearchBox._method.stopPropagation(event);
        });

        // 设置点击文档隐藏弹出的城市选择框
        SearchBox._method.on(document, 'click', function (event) {
            event = SearchBox._method.getEvent(event);
            var target = SearchBox._method.getTarget(event);
            if (target == that.input) return false;
            if (that.searchBox)SearchBox._method.addClass('hide', that.searchBox);
            if (that.searchInputBox) {
                that.searchInputBox.hide();
                that.searchInputBox.val('')
            }
            if (that.ul)SearchBox._method.addClass('hide', that.ul);
        });

        div.className = 'search-box-wrap';
        div.style.position = 'absolute';
        div.style.zIndex = 999999;

        var childdiv = this.searchBox = document.createElement('div');
        childdiv.className = 'search-box';
        childdiv.id = 'searchBox';

        childdiv.innerHTML = SearchBox.navItem;
        var itemBox = this.itemBox =  document.createElement('div');
        itemBox.className = 'item-box';
        childdiv.appendChild(itemBox);
        div.appendChild(childdiv);
        this.createItemBox(false);

        this.searchInputBox = $('.search-input-box');
        this.searchInputBox.on('click',function(event){
        });

        this.searchInputBox.on('keyup',function(event){
            event = event || window.event;
            var keycode = event.keyCode;
            SearchBox._method.addClass('hide',that.searchBox);

            var value = that.searchInputValue = SearchBox._method.trim(this.value);
            // 下拉菜单显示的时候捕捉按键事件
            if(that.ul && !SearchBox._method.hasClass('hide',that.ul) && !that.isEmpty){
                that.KeyboardEvent(event,keycode);
            }

            SearchBox.onSearchValueChange(value,that.currentPage,function(data){
                SearchBox.searchData = data;
                that.searchValue = SearchBox.searchData.data;
                that.searchPagination = SearchBox.searchData.pagination;

                that.createUl();
                that.scrollSearchEvent();
            });
        });
    },

    //创建TAB下面DIV：hot,a-h,i-p,q-z 分类HTML生成，DOM操作
    createItemBox:function(flag){
        var contentList = SearchBox.contentList.data;
        this.pagination = SearchBox.contentList.pagination;
        var _html = '';
        if(contentList && contentList.length){
            if(this.defaultText){
                _html += '<a href="javascript:;" data-name='+JSON.stringify({})+'>'+ this.defaultText +'</a>'
            }
            if(flag && this.pagination.currentPage == this.pagination.totalPage && contentList.length < 10){
                _html += this.itemBox.innerHTML;
            }
            contentList.forEach(function(val, index){
                _html += '<a href="javascript:;" data-name='+JSON.stringify(val)+'>'+ val.name +'</a>';
            });
        }
        this.itemBox.innerHTML = _html || '';
        this.input.parentNode.appendChild(this.rootDiv);

        this.tabChange();
        this.linkEvent();
    },

    //tab按字母顺序切换
    tabChange:function(){
        var lis = SearchBox._method.$('li',this.searchBox);
        var divs = SearchBox._method.$('div',this.itemBox);
        var that = this;
        for(var i=0,n=lis.length;i<n;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(var j=0;j<n;j++){
                    SearchBox._method.removeClass('on',lis[j]);
                    SearchBox._method.addClass('hide',divs[j]);
                }

                that.index = this.innerHTML;
                SearchBox.toggleTab(that.currentPage,this.innerHTML,function(data){
                    SearchBox.contentList = data;
                    that.createItemBox(false);
                });

                SearchBox._method.addClass('on',this);
                SearchBox._method.removeClass('hide',divs[this.index]);
            };
        }
    },

    //产品按字母展示项,点击选中
    linkEvent:function(){
        var links = SearchBox._method.$('a',this.itemBox);
        var that = this;
        for(var i=0,n=links.length;i<n;i++){
            links[i].onclick = function(){
                var dataName = $(this).attr('data-name');

                if(dataName == '{}'){
                    that.input.value = '';
                    that.multipleData = [];
                    SearchBox.attrTextModel(that.input.value, []);
                }else{
                    if(that.multipleSign){
                        if(!that.isExistInVal(this.innerHTML)){
                            that.input.value ? that.input.value = that.input.value + that.multipleSign + this.innerHTML : that.input.value = this.innerHTML;
                            that.multipleData.push(JSON.parse(dataName));
                            SearchBox.attrTextModel(that.input.value, that.multipleData);
                        }
                    }else{
                        that.input.value = this.innerHTML;
                        SearchBox.attrTextModel(that.input.value,JSON.parse(dataName));
                        SearchBox._method.addClass('hide',that.searchBox);
                        that.searchInputBox.hide();
                        that.searchInputBox.val('')
                    }
                }
            }
        }
    },

    //INPUT输入框事件,点击生成组件
    inputEvent:function(){
        var that = this;
        SearchBox._method.on(this.input,'click',function(event){
            event = event || window.event;
            if(!that.searchBox){
                that.createWarp();
            }else if(!!that.searchBox && SearchBox._method.hasClass('hide',that.searchBox)){
                if(!that.ul || (that.ul && SearchBox._method.hasClass('hide',that.ul))){
                    SearchBox._method.removeClass('hide',that.searchBox);
                    that.searchInputBox.show();
                }
            }

            that.scrollEvent();
        });

        SearchBox._method.on(this.input,'keyup',function(event){
            event = event || window.event;
            if(event.keyCode == 8){
                var nameList = that.input.value.split(","),
                    delResArr = [];

                nameList.splice(nameList.length-1, 1);
                nameList.forEach(function(value){
                    that.multipleData.find(function (item){
                        if(item.name && item.name.indexOf('(') != -1){
                            item.name = item.name.split('(')[0];
                        }
                        if(item.name == value){
                            delResArr.push(item)
                        }
                    });
                });

                that.multipleData = delResArr;
                that.input.value = nameList.join(",");

                SearchBox.attrTextModel(that.input.value,that.multipleData);
            }
        });

    },

    //输入搜索条件生成搜索结果下拉选择列表
    createUl:function () {
        var that = this;
        var str = '';
        var value = SearchBox._method.trim(that.searchInputValue);
        $(".loading").remove();
        // 当value不等于空的时候执行
        if (value !== '') {
            // 此处需设置中文输入法也可用onpropertychange
            var searchResult = [];
            if(that.defaultText && that.searchValue.length !== 0){
                str = '<li class="cityname" data-name='+JSON.stringify({})+'>' + that.defaultText + '</li>';
                searchResult.push(str);
            }
            for (var i = 0, n = that.searchValue.length; i < n; i++) {
                if (searchResult.length !== 0) {
                    str = '<li class="cityname" data-name='+JSON.stringify(that.searchValue[i])+'>' + that.searchValue[i].name + '</li>';
                } else {
                    str = '<li class="cityname" data-name='+JSON.stringify(that.searchValue[i])+'>' + that.searchValue[i].name + '</li>';
                }
                searchResult.push(str);
            }
            this.isEmpty = false;
            // 如果搜索数据为空
            if (searchResult.length == 0) {
                this.isEmpty = true;
                str = '<li class="empty">对不起，没有找到 "<em>' + value + '</em>"</li>';
                searchResult.push(str);
            }
            // 如果slideul不存在则添加ul
            if (!this.ul) {
                var ul = this.ul = document.createElement('ul');
                ul.className = 'cityslide mCustomScrollbar';
                this.rootDiv && this.rootDiv.appendChild(ul);
                // 记录按键次数，方向键
                this.count = 0;
            } else if (this.ul && SearchBox._method.hasClass('hide', this.ul)) {
                this.count = 0;
                SearchBox._method.removeClass('hide', this.ul);
            }
            this.ul.innerHTML = searchResult.join('');

            // 绑定Li事件
            this.liEvent();
        }else{
            SearchBox._method.addClass('hide',this.ul);
            SearchBox._method.removeClass('hide',this.searchBox);
            that.searchInputBox.show();
            that.searchInputBox.val('')
        }
    },

    //定键盘事件，上、下、Enter键
    KeyboardEvent:function(event,keycode){
        var lis = SearchBox._method.$('li',this.ul);
        var len = lis.length;
        var that = this ;
        switch(keycode){
            case 40: //向下箭头↓
                this.count++;
                if(this.count > len-1) this.count = 0;
                for(var i=0;i<len;i++){
                    SearchBox._method.removeClass('on',lis[i]);
                }
                SearchBox._method.addClass('on',lis[this.count]);
                break;
            case 38: //向上箭头↑
                this.count--;
                if(this.count<0) this.count = len-1;
                for(i=0;i<len;i++){
                    SearchBox._method.removeClass('on',lis[i]);
                }
                SearchBox._method.addClass('on',lis[this.count]);
                break;
            default:
                break;
        }
    },


    //搜索结果下拉列表的li事件
    liEvent:function(){
        var that = this;
        var lis = SearchBox._method.$('li',this.ul);
        for(var i = 0,n = lis.length;i < n;i++){

            SearchBox._method.on(lis[i],'click',function(event){
                event = SearchBox._method.getEvent(event);
                var target = SearchBox._method.getTarget(event);
                var dataName = $(target).attr('data-name');

                if(dataName == '{}'){
                    that.input.value = '';
                    that.multipleData = [];
                    SearchBox.attrTextModel(that.input.value, []);
                }else if(dataName &&  dataName != '{}'){
                    if(that.multipleSign){
                        if(!that.isExistInVal(target.innerHTML)) {
                            that.input.value ? that.input.value = that.input.value + that.multipleSign + target.innerHTML : that.input.value = target.innerHTML;
                            that.multipleData.push(JSON.parse(dataName));
                            SearchBox.attrTextModel(that.input.value, that.multipleData);
                        }
                    }else{
                        that.input.value = target.innerHTML;
                        SearchBox.attrTextModel(that.input.value, JSON.parse(dataName));
                        SearchBox._method.addClass('hide', that.ul);
                        that.searchInputBox.hide();
                        that.searchInputBox.val('')
                    }
                }
            });

            SearchBox._method.on(lis[i],'mouseover',function(event){
                event = SearchBox._method.getEvent(event);
                var target = SearchBox._method.getTarget(event);
                SearchBox._method.addClass('on',target);
            });

            SearchBox._method.on(lis[i],'mouseout',function(event){
                event = SearchBox._method.getEvent(event);
                var target = SearchBox._method.getTarget(event);
                SearchBox._method.removeClass('on',target);
            })
        }
    },

    //去重
    isExistInVal: function(val) {
        if(val && val.indexOf('(') != -1){
            val = val.split('(')[0];
        }
        var inputVal = this.input.value;
        if(!$.trim(inputVal) || inputVal.indexOf(val) == -1) {
            return false;
        }
        return true;
    }
};

module.exports = SearchBox;


组件css代码：

*{margin:0;padding:0;box-sizing:border-box;}
.search-box-wrap{font:14px 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif,5b8b4f53;background:#fff;text-align:left;}
.search-box-wrap .search-input-box{ 400px!important;height: 30px;line-height: 30px;border: 1px solid #ddd;padding-left: 8px;}
.cityslide{400px;list-style:none;margin:0;padding:0;border:1px solid #ddd;border-top: none;overflow:auto;max-height:260px;}
.cityslide li{border-bottom: 1px solid #ddd;text-align: left;list-style:none;overflow:hidden;height:30px;padding:0px 10px;line-height:30px;font-weight:normal; 100%;}
.cityslide li.on{background:#e03a40;color:#555;cursor:pointer;}
.cityslide li:hover{background:#e03a40;color:#555;cursor:pointer;}
.cityslide li.empty{background:#fff2e8;color:#555;}
.cityslide li.empty em{color:red;font-style:normal;}
.cityname{float:left;}
.cityspell{float:right;}
.search-box{400px;border:1px solid #ddd;border-top: none;overflow:hidden;}
.search-box ul{margin:0;padding:0;overflow:hidden;padding-top: 5px}
.search-box ul li:first-child{margin-left:5px;}
.search-box ul li{line-height: 24px;float:left;list-style:none;padding:2px;border-bottom:1px solid #DDD;cursor:pointer;display:inline;color:#e03a40; auto}
.search-box ul li.on{border-bottom-color:#e03a40;position:relative; auto}
.hide{display:none;}
p.tip{color:#555;line-height:20px;padding:5px;margin:0;text-indent:3px;}
.item-box{400px;border-top:1px solid #ddd;margin-top:-1px;clear:left;overflow:auto;_margin-bottom:8px;max-height: 260px;}
.cityTab{overflow:hidden;}
.cityinput{ font-size: 12px; padding-left: 2px; border: 1px solid #ddd; }
.item-box a{padding-left:10px;line-height:34px;display:block;color:#555;text-decoration:none;border-bottom: 1px solid #ddd;}
.item-box a:hover{color:#fff;background: #e03a40;}

组件引用：

首先引入组件

引入位置<input id="product" value={this.state.productName} readonly name="" className="fc_productSelect"/>  id索引

代用组件：

self.getProductAllData({'urlParams': {'isHot': true}},function(result){
    if(result.errorCode === 0){
        self.getProductNavItem(function(res){
            if(res.errorCode === 0){
                var resultData = self.rechangeProductData(result.data);//数据重组，符合需求为主
                var productBox = new SearchBox.init({
                    inputId:'product',      //id
                    searchData:[],          //默认搜索结果为空，可不配置
                    tip:'请输入名称或编码',    //组件搜索placehoder,可不配置
                    navItem: res.data,      //获取字母列表
                    defaultText: '请选择',   //默认Text，可不配置
                    tabIndex:'热门',         //热门项
                    multipleSign: ",",      //多选分隔符，不配置为单选
                    contentList: resultData,//默认热门数据
                    toggleTab: function(currentPage,index,callback){//字母切换数据请求
                        this.tabIndex = index;
                        var config = {
                            'urlParams': {
                                'isHot':false,
                                'pageIndex': currentPage || 1,
                                'pageSize': 10,
                                'capital': index
                            }
                        };
                        if(index == "热门"){
                            config.urlParams.isHot = true;
                            config.urlParams.capital = '';
                        }
                        if(index == "其他"){
                            config.urlParams.isHot = false;
                            config.urlParams.capital = '_';
                        }
                        self.getProductAllData(config,function(tabRes){
                            if(tabRes.errorCode === 0){
                                var tabResData = self.rechangeProductData(tabRes.data);
                                callback({data:tabResData,pagination:tabRes.pagination})
                            }
                        });
                    },
                    onSearchValueChange:function(data,currentPage,callback) {//搜索请求发起
                        var config = {
                            'urlParams': {
                                'q':data,
                                'isHot':false,
                                'pageIndex': currentPage || 1,
                                'pageSize': 10,
                                'capital': ''
                            }
                        };
                        self.getProductAllData(config,function(searchRes){
                            if(searchRes.errorCode === 0){
                                var searchResData = self.rechangeProductData(searchRes.data);
                                callback({data:searchResData,pagination:searchRes.pagination})
                            }
                        });
                    },
                    attrTextModel: function (name, item) {//获取选择结果
                        var stateData = self.state,
                            productNames = [],
                            productList;

                        stateData.productCode= [];
                        if (!name) {
                            productList = {};
                        } else {
                            var names = name.split(",");
                            names.forEach(function(value){
                                value = value.split('(')[0];
                                productList = resDatas.find(function (item){
                                    return item.name == value;
                                });
                                productNames.push(productList.name);
                                stateData.productCode.push(productList.uid);
                            });
                        }
                        stateData.productName = productNames.toString();
                        self.setState(stateData);
                    }
                });
            }
        });
    }
});

数据重组方法：

rechangeProductData : function (data){
    data.forEach(function(value){
        value.name += '('+ value.code +')';
    });
    return data
},