ligerUI 关于ligerComboBox 自动完成用键盘上下键和回车键进行操作

最新推荐文章于 2022-04-28 15:46:48 发布

chunman8103

最新推荐文章于 2022-04-28 15:46:48 发布

阅读量471

点赞数

原文链接：https://my.oschina.net/u/1185451/blog/299937

版权

上一篇我们改进了 combobox 对本地数据的支持！现在我们又有了新的问题那就是combobox 对自动完成后的数据无法用键盘去操作比如数据显示出来后！无法使用键盘上下键或者回车键进行选择! 所以我们今天的工作主要是为了改进源代码使他能够完成我们的需要！

1，首先增加一个 selectIndoex 字段用于当前选中的项目

$.ligerDefaults.ComboBox = {
        resize: true,           
        isMultiSelect: false,   
        isShowCheckBox: false,  
        columns: null,     
        selectBoxWidth: null,
        selectBoxHeight: 120, 
        selectIndex:0,  // 新增当前选中索引
        onBeforeSelect: false,
        onSelected: null, 
        initValue: null,
        initText: null,
        ……………………………………  //下面没改动的就不帖了
        ……………………………………

2，然后在_addClickEven 后面加上2个事件

_addClickEven: function ()
{            ………………………………
             …………………………  这些代码都省略了
             …………………………
 },
 setSelectState:function(index,newdata){  //设置选中状态
        	var g = this, p = this.options; 
        	if(g.grid){
        		if(newdata){
        			var rowobj =  g.grid.getRowObj(newdata.Rows[p.selectIndex]['__id']);
	        		$(rowobj).addClass("l-selected");
	        		return
        		}
        		var rowobj =  g.grid.getRowObj(p.grid.data.Rows[p.selectIndex]['__id']);
	        	$(rowobj).addClass("l-selected");
        	}

        },
 clearSelectState:function(index,newdata){//取消选中状态
        	var g = this, p = this.options; 
        	if(newdata){
        		for(var o in newdata.Rows){
        		var rowobj1 =  g.grid.getRowObj(newdata.Rows[o]['__id']);
	    		if($(rowobj1).hasClass('l-selected')){
	    			$(rowobj1).removeClass('l-selected');
	    			}
        		}
        		return
        	}
        	for(var o in p.grid.data.Rows){
        		var rowobj1 =  g.grid.getRowObj(p.grid.data.Rows[o]['__id']);
	    		if($(rowobj1).hasClass('l-selected')){
	    			$(rowobj1).removeClass('l-selected');
	    		}
        	}
        },

3，在setGrid：function(grid)事件中的最后加上一句代码

//表格
        setGrid: function (grid)
        {
            …………………………
            …………………………
            …………………………省略了以上所有代码
            g.grid.refreshSize();
            g.setSelectState(p.selectIndex); //新增选中状态
        }

4，在_toggleSelectBox: function (isHide)事件中加上3段代码

   _toggleSelectBox: function (isHide)
        {
            var g = this, p = this.options;
            if (!g || !p) return;
            var textHeight = g.wrapper.height();
            g.boxToggling = true;
            if (isHide)
            {
            	g.clearSelectState(p.selectIndex); //清楚选中状态class
            	p.selectIndex = 0; //每次关闭创建清理选中状态
                if (p.slide)
                {
                    g.selectBox.slideToggle('fast', function ()
                    {
                        g.boxToggling = false;
                    });
                }
                else
                {
                    g.selectBox.hide();
                    g.boxToggling = false;
                }
            }
            else
            {
            	g.setSelectState(p.selectIndex); //打开box时设置选中状态
                g.updateSelectBoxPosition();
                if (p.slide)
                {
                    g.selectBox.slideToggle('fast', function ()
                    {
                        g.boxToggling = false;
                        if (!p.isShowCheckBox && $('td.l-selected', g.selectBox).length > 0)
                        {
                            var offSet = ($('td.l-selected', g.selectBox).offset().top - g.selectBox.offset().top);
                            $(".l-box-select-inner", g.selectBox).animate({ scrollTop: offSet });
                        }
                    });
                }
                else
                {
                    g.selectBox.show();
                    g.boxToggling = false;
                    if (!g.tree && !g.grid && !p.isShowCheckBox && $('td.l-selected', g.selectBox).length > 0)
                    {
                        var offSet = ($('td.l-selected', g.selectBox).offset().top - g.selectBox.offset().top);
                        $(".l-box-select-inner", g.selectBox).animate({ scrollTop: offSet });
                    }
                }
                
            }
            g.isShowed = g.selectBox.is(":visible");
            g.trigger('toggle', [isHide]);
            g.trigger(isHide ? 'hide' : 'show');
        }

5，在_setAutocomplete: function (value) 事件中加入了主要逻辑判断我把全部源码帖出来

_setAutocomplete: function (value) {
            var g = this, p = this.options;
            if (!value) return;
            g.inputText.removeAttr("readonly");
            var lastText = g.inputText.val();
            var newrow = {"Rows":[]}; //创建一个新的本地数据副本
            
            g.inputText.keyup(function (event)
            {
            	
                setTimeout(function ()
                {
                  	if(g.isShowed) //检测box是否打开
                  	{
                  		var e = (e||event);
	                	if(e.keyCode == 13){ //检测到回车键
	                		if(lastText != ""){
	                			if(newrow.Rows[0]){ //查找副本数据
		                			g.inputText.val(newrow.Rows[p.selectIndex][p.textField]);
		                			g.selectBox.hide();
	                			}
	                		}else{
	                			if(p.grid.data.Rows[0]){
		                			g.inputText.val(p.grid.data.Rows[p.selectIndex][p.textField]);
		                			g.selectBox.hide();
	                			}
	                		}
	                	}
	                	if(e.keyCode == 40){ //检测到向下键
	                		if(lastText != ""){
	                			if(newrow.Rows.length > p.selectIndex){
	                				g.clearSelectState(p.selectIndex,newrow);
			                		p.selectIndex = p.selectIndex +1;
			                		g.setSelectState(p.selectIndex,newrow);
	                			}
	                			return
	                		}
	                		if(p.grid.data.Rows.length > p.selectIndex){
	                			g.clearSelectState(p.selectIndex);
		                		p.selectIndex = p.selectIndex +1;
		                		g.setSelectState(p.selectIndex);
	                		}
	                		
	                	}
	                    if(e.keyCode == 38){//检测到向上键
	                    	if(lastText != ""){
	                			if(p.selectIndex > 0){
	                				g.clearSelectState(p.selectIndex,newrow);
			                		p.selectIndex = p.selectIndex -1;
			                		g.setSelectState(p.selectIndex,newrow);
	                			}
	                			return
	                		}
	                    	if(p.selectIndex >0){
	                			g.clearSelectState(p.selectIndex);
		                		p.selectIndex = p.selectIndex -1;
		                		g.setSelectState(p.selectIndex);
	                		}
	                    }
	                    
	                    if (lastText == g.inputText.val()) return;
	                    newrow = {"Rows":[]}; 
	                    p.initValue = "";
	                    g.valueField.val("");
	                  	lastText = g.inputText.val();
	                    if (p.url)
	                    {
	                        g.setParm('key', g.inputText.val());
	                        g.set('url', p.url);
	                        g.selectBox.show();
	                    }else if(p.data){
	                    	var rows = p.data;
	                    	for(var o in newrow){
	                    		var index = newrow[o][p.SearchField].toString();
	                    		if(index.indexOf(lastText) >= 0){
	                    			newrow.push(rows[o])
	                    		}
	                    	}
	                    	g.set('data',newrows);
	                    	g.reload();
	                    }else if (p.grid)
	                    {
	                    	if(p.grid.data) //判断是否设置了本地数据
	                    	{
	                    		var rows = p.grid.data.Rows; //获取本地数据所有行  
	                    		
	                    		for(var o in rows){  //下面就是本地数据匹配
	                    			var no = rows[o][p.SearchField].toString();  //这么我配备的是 我的本地数据的一个No 字段 我的行数组大概是这样的{Id:0,No:'001',Name:'小明'}
	                    			var index =no.indexOf(lastText); 
	                    			if(index >= 0 ){
	                    				newrow.Rows.push(rows[o]); //如果本行包含了用户输入的数据那么加入副本数据
	                    			}
	                    		}
	                    		g.grid.setOptions({data:newrow}); //匹配完毕设置新的本地数据
	                    		g.grid.loadData();//载入新数据
	                    		p.selectIndex = 0;
	                        	g.setSelectState(p.selectIndex);
	                    		return;
	                    	}
	                        g.grid.setParm('key', g.inputText.val());
	                        g.grid.reload();
	                        p.selectIndex = 0;
	                        g.setSelectState(p.selectIndex);
	                    } 
	                    lastText = g.inputText.val();
                  		//
                  	}
                	
                }, 1);
            });
        }
    	});

到了这里基本改进完毕让我们看一下效果吧

转载于:https://my.oschina.net/u/1185451/blog/299937

chunman8103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ligerUI 关于ligerComboBox 自动完成用键盘上下键和回车键进行操作

上一篇我们改进了 combobox 对本地数据的支持！现在我们又有了新的问题那就是combobox 对自动完成后的数据无法用键盘去操作比如数据显示出来后！无法使用键盘上下键或者回车键进行选择! 所以我们今天的工作主要是为了改进源代码使他能够完成我们的需要！ 1，首先...
复制链接

扫一扫