vesh-cli/template/Part/searchbox.js

码农村nodejs版本VESH框架脚手架搭建器

(function(V, W, $) {
    V.registScript('../../style/module/part/searchbox.css', function(path, vm) {
        var _ = this,
            __ = {}; {
            V.inherit.apply(_, [W.TextBox, [path || '<span class="c_searchBox"><span style="display:none;"></span><input type="text"/><ul class="c_searchbox_container" style="display:none;"></ul></span>', vm || { data: { nodata: '没有找到数据' } }]]);
            __.onLoad = _.onLoad;
            __.render = _.render;
            __.values = {};
            __.replaceNode = _.replaceNode;
            //通过onChange 事件获取输入数据 通过values属性重置下拉列表 通过onSelect事件设定最后选择的值
        }

        _.replaceNode = function() {
            __.innerhtml = _.node.html() || '{key}';
            _.content = '<li data-index="{_index}">' + __.innerhtml + '</li>';
            __.replaceNode.apply(_, arguments);
        };

        _.onLoad = function(node) {
            __.onLoad(node);
            _.ul = $(node.find('ul:first'));
            _.input.on('keydown', function(e) {
                if (e.keyCode == 40)
                    _.ul.select();
            });
            _.ul.on('mouseleave', function(e) {
                _.ul.hide();
            });
            _.ul.on('click', 'li', function(e) {
                try {
                    _.ul.hide();
                    var _this = $(this);
                    var val = __.values[_this.attr('data-index')];
                    if (val) {
                        _.input.val(val.key);
                        _.call('select', { e: e, selectvalue: { key: val.key, value: val.value } });
                    }
                    V.stopProp(e);
                    return e.target.nodeName != 'A';
                } catch (e) {
                    console.log(e.stack);
                }
            });
            return;
        };
        _.render = function(data) {
            data = __.render(data);
            V.forC(data, function(k, v) {
                switch (k) {
                    case 'value':
                        _.ul.empty()
                        _.ul.hide();
                        break;
                    case 'values':
                        if (k.toLowerCase() == 'values') __.values = {};
                        if (_.ul.children('li.nodata').length > 0) { _.ul.children('li.nodata').remove(); }
                        if (v.length == 0 && k.toLowerCase() == 'values') {
                            _.ul.html('').hide();
                        } else {
                            var sb = VJ.sb();
                            V.forC(v, function(k2, v2) {
                                var _index = V.random();
                                var v3 = { key: k2, value: v2, _index: _index };
                                if (typeof(v2) == 'object') v3 = V.merge({ _index: _index, key: k2 }, v2);
                                __.values[_index] = v3;
                                sb.appendFormat(_.content, v3);
                            }, function() {
                                _.vm.data.values = __.values;
                                if (k.toLowerCase() == 'values') _.ul.empty();
                                _.ul.append(sb.clear());
                                _.ul.children('li:even').addClass('p_li_even');
                                _.ul.children('li:odd').addClass('p_li_odd');
                                _.ul.children('li').off('mouseenter').off('mouseover').off('mouseleave').hover(
                                    function(e) {
                                        var _this = $(this).addClass('p_list_hover');
                                    },
                                    function(e) {
                                        var _this = $(this).removeClass('p_list_hover');
                                    }
                                );
                                sb = null;
                                if (data.select)
                                    _.ul.children('li:eq(' + data.select + ')').addClass('active').siblings().removeClass('active');

                                _.ul.show().css('margin-left', _.input.position().left - _.node.position().left);
                            });
                        }
                        break;
                }
            });
            return data;
        }
    });
})(VJ, VJ.view, jQuery);