picker 数据过滤

分类：MUI

picker

我想在中间加入一个搜索框，在数据多的情况进行数据过滤，这个应该怎么实现？新手求教

2017-08-08 17:02 1 条评论负责人:无分享

2 个回复

Binary

之前那个有问题，重新修改了

/**  
 * 弹出选择列表插件  
 * 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js  
 * varstion 1.0.1  
 * by Houfeng  
 * Houfeng@DCloud.io  
 */  

(function($, document) {  

    //创建 DOM  
    $.dom = function(str) {  
        if (typeof(str) !== 'string') {  
            if ((str instanceof Array) || (str[0] && str.length)) {  
                return [].slice.call(str);  
            } else {  
                return [str];  
            }  
        }  
        if (!$.__create_dom_div__) {  
            $.__create_dom_div__ = document.createElement('div');  
        }  
        $.__create_dom_div__.innerHTML = str;  
        return [].slice.call($.__create_dom_div__.childNodes);  
    };  

    var panelBuffer = '<div class="mui-poppicker">\  
        <div class="mui-poppicker-header" style="text-align:center">\  
            <button class="mui-btn mui-poppicker-btn-cancel">取消</button>\  
            <input style="height:30px;width:60%;color:black;" class="mui-poppicker-input" placeholder="查询..."></input>\  
            <button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\  
            <div class="mui-poppicker-clear"></div>\  
        </div>\  
        <div class="mui-poppicker-body">\  
        </div>\  
    </div>';  

    var pickerBuffer = '<div class="mui-picker">\  
        <div class="mui-picker-inner">\  
            <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\  
            <ul class="mui-pciker-list">\  
            </ul>\  
            <div class="mui-pciker-rule mui-pciker-rule-bg"></div>\  
        </div>\  
    </div>';  

    //定义弹出选择器类  
    var PopPicker = $.PopPicker = $.Class.extend({  
        //构造函数  
        init: function(options) {  
            var self = this;  
            self.options = options || {};  
            self.options.buttons = self.options.buttons || ['取消', '确定'];  
            self.panel = $.dom(panelBuffer)[0];  
            document.body.appendChild(self.panel);  
            self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');  
            self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');  
            self.body = self.panel.querySelector('.mui-poppicker-body');  
            self.mask = $.createMask();  
            self.cancel.innerText = self.options.buttons[0];  
            self.ok.innerText = self.options.buttons[1];  

            // Add By HaoYanbing 20171213 添加搜索功能  
            self.searchInput = self.panel.querySelector('.mui-poppicker-input');  
            self.searchInput.addEventListener('tap', function(event) {  
                self.searchInput.focus();  
            }, false);  
            self.searchInput.addEventListener('input', function(event) {  
                var searchText = self.searchInput.value;  
                self.filterData(searchText);  
            }, false);  

            self.cancel.addEventListener('tap', function(event) {  
                self.hide();  
            }, false);  
            self.ok.addEventListener('tap', function(event) {  
                if (self.callback) {  
                    var rs = self.callback(self.getSelectedItems());  
                    if (rs !== false) {  
                        self.hide();  
                    }  
                }  
            }, false);  
            self.mask[0].addEventListener('tap', function() {  
                self.hide();  
            }, false);  
            self._createPicker();  
            //防止滚动穿透  
            self.panel.addEventListener($.EVENT_START, function(event) {  
                event.preventDefault();  
            }, false);  
            self.panel.addEventListener($.EVENT_MOVE, function(event) {  
                event.preventDefault();  
            }, false);  
        },  
        _createPicker: function() {  
            var self = this;  
            var layer = self.options.layer || 1;  
            var width = (100 / layer) + '%';  
            self.pickers = [];  
            for (var i = 1; i <= layer; i++) {  
                var pickerElement = $.dom(pickerBuffer)[0];  
                pickerElement.style.width = width;  
                self.body.appendChild(pickerElement);  
                var picker = $(pickerElement).picker();  
                self.pickers.push(picker);  
                pickerElement.addEventListener('change', function(event) {  
                    var nextPickerElement = this.nextSibling;  
                    if (nextPickerElement && nextPickerElement.picker) {  
                        var eventData = event.detail || {};  
                        var preItem = eventData.item || {};  
                        nextPickerElement.picker.setItems(preItem.children);  
                    }  
                }, false);  
            }  
        },  
        //填充数据  
        setData: function(data) {  
            var self = this;  
            self.data = data || [];  
            self.pickers[0].setItems(self.data);  
        },  
        //获取选中的项（数组）  
        getSelectedItems: function() {  
            var self = this;  
            var items = [];  
            for (var i in self.pickers) {  
                var picker = self.pickers[i];  
                items.push(picker.getSelectedItem() || {});  
            }  
            return items;  
        },  
        //显示  
        show: function(callback) {  
            var self = this;  
            self.callback = callback;  
            self.mask.show();  
            document.body.classList.add($.className('poppicker-active-for-page'));  
            self.panel.classList.add($.className('active'));  
            //处理物理返回键  
            self.__back = $.back;  
            $.back = function() {  
                self.hide();  
            };  
        },  
        //隐藏  
        hide: function() {  
            var self = this;  
            if (self.disposed) return;  
            self.panel.classList.remove($.className('active'));  
            self.mask.close();  
            document.body.classList.remove($.className('poppicker-active-for-page'));  
            //处理物理返回键  
            $.back=self.__back;  
        },  
        dispose: function() {  
            var self = this;  
            self.hide();  
            setTimeout(function() {  
                self.panel.parentNode.removeChild(self.panel);  
                for (var name in self) {  
                    self[name] = null;  
                    delete self[name];  
                };  
                self.disposed = true;  
            }, 300);  
        },  
        // Add By HaoYanbing 20171213 过滤数据  
        filterData: function(searchText){  
            var self = this;  
            var newData = JSON.parse(JSON.stringify(self.data));  
            var layer = self.options.layer || 1;  

            // 根据layer获取最底级数据 调用deleteItem()  
            function getBottomChildren(data, k){  
                if(k < layer){  
                    data.forEach(function(item){  
                        if(item.children != undefined && item.children.length > 0){  
                            getBottomChildren(item.children, (k + 1));  
                        }  
                    })  
                }else{  
                    deleteItem(data);  
                }  
            }  
            getBottomChildren(newData, 1);  

            // 删除不匹配的数据  
            function deleteItem(data){  
                for (var i = data.length - 1; i >= 0; i--) {  
                    var text = data[i].text || data[i];  
                    if(text.indexOf(searchText) < 0) {  
                        data.splice(i, 1);  
                    }  
                }  
            }  

            // 删除子数据为空的父数据  
            function deleteNullChildren(data, j){  
                if(j < layer){  
                    for (var i = data.length - 1; i >= 0; i--) {  
                        if(data[i].children == undefined || data[i].children.length == 0){  
                            data.splice(i, 1);  
                        }else{  
                            deleteNullChildren(data[i].children, (j + 1));  
                        }  
                    }  
                }  
            }  
            for(var n = 0; n < layer; n++){  
                deleteNullChildren(newData, 1);  
            }  

            // 重新设置data  
            self.pickers[0].setItems(newData);  
        }  
    });  

})(mui, document);

kkcode

这个在iphone真机上有问题，input的获取焦点失败或无法输入和软键盘遮盖poppicker控件。楼主遇到问题吗

2018-11-30 17:33

Binary

替换mui.poppicker.js即可

/**  
 * 弹出选择列表插件  
 * 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js  
 * varstion 1.0.1  
 * by Houfeng  
 * Houfeng@DCloud.io  
 */  

(function($, document) {  

    //创建 DOM  
    $.dom = function(str) {  
        if (typeof(str) !== 'string') {  
            if ((str instanceof Array) || (str[0] && str.length)) {  
                return [].slice.call(str);  
            } else {  
                return [str];  
            }  
        }  
        if (!$.__create_dom_div__) {  
            $.__create_dom_div__ = document.createElement('div');  
        }  
        $.__create_dom_div__.innerHTML = str;  
        return [].slice.call($.__create_dom_div__.childNodes);  
    };  

    var panelBuffer = '<div class="mui-poppicker">\  
        <div class="mui-poppicker-header" style="text-align:center">\  
            <button class="mui-btn mui-poppicker-btn-cancel">取消</button>\  
            <input style="height:30px;width:60%;color:black;" class="mui-poppicker-input" placeholder="查询..."></input>\  
            <button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\  
            <div class="mui-poppicker-clear"></div>\  
        </div>\  
        <div class="mui-poppicker-body">\  
        </div>\  
    </div>';  

    var pickerBuffer = '<div class="mui-picker">\  
        <div class="mui-picker-inner">\  
            <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\  
            <ul class="mui-pciker-list">\  
            </ul>\  
            <div class="mui-pciker-rule mui-pciker-rule-bg"></div>\  
        </div>\  
    </div>';  

    //定义弹出选择器类  
    var PopPicker = $.PopPicker = $.Class.extend({  
        //构造函数  
        init: function(options) {  
            var self = this;  
            self.options = options || {};  
            self.options.buttons = self.options.buttons || ['取消', '确定'];  
            self.panel = $.dom(panelBuffer)[0];  
            document.body.appendChild(self.panel);  
            self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');  
            self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');  
            self.body = self.panel.querySelector('.mui-poppicker-body');  
            self.mask = $.createMask();  
            self.cancel.innerText = self.options.buttons[0];  
            self.ok.innerText = self.options.buttons[1];  

            // Add By HaoYanbing 20171213 添加搜索功能  
            self.searchInput = self.panel.querySelector('.mui-poppicker-input');  
            self.searchInput.addEventListener('tap', function(event) {  
                self.searchInput.focus();  
            }, false);  
            self.searchInput.addEventListener('input', function(event) {  
                var searchText = self.searchInput.value;  
                self.filterData(searchText);  
            }, false);  

            self.cancel.addEventListener('tap', function(event) {  
                self.hide();  
            }, false);  
            self.ok.addEventListener('tap', function(event) {  
                if (self.callback) {  
                    var rs = self.callback(self.getSelectedItems());  
                    if (rs !== false) {  
                        self.hide();  
                    }  
                }  
            }, false);  
            self.mask[0].addEventListener('tap', function() {  
                self.hide();  
            }, false);  
            self._createPicker();  
            //防止滚动穿透  
            self.panel.addEventListener($.EVENT_START, function(event) {  
                event.preventDefault();  
            }, false);  
            self.panel.addEventListener($.EVENT_MOVE, function(event) {  
                event.preventDefault();  
            }, false);  
        },  
        _createPicker: function() {  
            var self = this;  
            var layer = self.options.layer || 1;  
            var width = (100 / layer) + '%';  
            self.pickers = [];  
            for (var i = 1; i <= layer; i++) {  
                var pickerElement = $.dom(pickerBuffer)[0];  
                pickerElement.style.width = width;  
                self.body.appendChild(pickerElement);  
                var picker = $(pickerElement).picker();  
                self.pickers.push(picker);  
                pickerElement.addEventListener('change', function(event) {  
                    var nextPickerElement = this.nextSibling;  
                    if (nextPickerElement && nextPickerElement.picker) {  
                        var eventData = event.detail || {};  
                        var preItem = eventData.item || {};  
                        nextPickerElement.picker.setItems(preItem.children);  
                    }  
                }, false);  
            }  
        },  
        //填充数据  
        setData: function(data) {  
            var self = this;  
            self.data = data || [];  
            self.pickers[0].setItems(self.data);  
        },  
        //获取选中的项（数组）  
        getSelectedItems: function() {  
            var self = this;  
            var items = [];  
            for (var i in self.pickers) {  
                var picker = self.pickers[i];  
                items.push(picker.getSelectedItem() || {});  
            }  
            return items;  
        },  
        //显示  
        show: function(callback) {  
            var self = this;  
            self.callback = callback;  
            self.mask.show();  
            document.body.classList.add($.className('poppicker-active-for-page'));  
            self.panel.classList.add($.className('active'));  
            //处理物理返回键  
            self.__back = $.back;  
            $.back = function() {  
                self.hide();  
            };  
        },  
        //隐藏  
        hide: function() {  
            var self = this;  
            if (self.disposed) return;  
            self.panel.classList.remove($.className('active'));  
            self.mask.close();  
            document.body.classList.remove($.className('poppicker-active-for-page'));  
            //处理物理返回键  
            $.back=self.__back;  
        },  
        dispose: function() {  
            var self = this;  
            self.hide();  
            setTimeout(function() {  
                self.panel.parentNode.removeChild(self.panel);  
                for (var name in self) {  
                    self[name] = null;  
                    delete self[name];  
                };  
                self.disposed = true;  
            }, 300);  
        },  
        // Add By HaoYanbing 20171213 过滤数据  
        filterData: function(searchText){  
            var self = this;  
            var newData = JSON.parse(JSON.stringify(self.data));  
            var layer = self.options.layer;  

            // 根据layer获取最底级数据 调用deleteItem()  
            var k = 1;  
            function getBottomChildren(data){  
                if(k++ < layer){  
                    data.forEach(function(item){  
                        if(item.children != undefined && item.children.length > 0){  
                            getBottomChildren(item.children);  
                        }  
                    })  
                }else{  
                    deleteItem(data);  
                }  
            }  
            getBottomChildren(newData);  

            // 删除不匹配的数据  
            function deleteItem(data){  
                for (var i = data.length - 1; i >= 0; i--) {  
                    var text = data[i].text || data[i];  
                    if(text.indexOf(searchText) < 0) {  
                        data.splice(i, 1);  
                    }  
                }  
            }  

            // 删除子数据为空的父数据  
            var j = 1;  
            function deleteNullChildren(data){  
                for (var i = data.length - 1; i >= 0; i--) {  
                    if(data[i].children == undefined || data[i].children.length == 0){  
                        data.splice(i, 1);  
                    }else{  
                        if(++j < layer){  
                            deleteNullChildren(data[i].children);  
                        }  
                    }  
                }     
            }  
            deleteNullChildren(newData);  
            // 重新设置data  
            self.pickers[0].setItems(newData);  
        }  
    });  

})(mui, document);

高先生163

大神，请问一下，这个怎么应用呢？我是新手，不太会呀，HTML页面中引入上面的js后，下来怎么用呀？求大神详细指点

2019-12-10 16:13

该问题目前已经被锁定, 无法添加新回复

picker 数据过滤

2 个回复

公告

相关问题

picker 数据过滤

与内容相关的链接

2 个回复

公告

相关问题