首页 > 关于搜索框上下键无法取得数据的问题

关于搜索框上下键无法取得数据的问题

目的:输入时能够获得列表选项,通过上下键进行选择。
问题:造了个有四个值的数据,而通过上下键只能取得前两个,求解决方法。

万分感谢。
http://pan.baidu.com/s/1bnymCyz
代码在链接中

还有!!
为什么在电脑网页中总是无法在发布问题框中填写内容,并且无法提交。


selected函数你每调用一次i又被重新赋值成0了。当然选不了下面的了


你的代码中 i 是个局部变量, 你每次触发 selected 时, 都会被重新初始化为0,
然后根据你的 上/下 (38/40) 的条件, 执行 +1 或者 -1 的动作,
所以它永远都是 0 或者 1, 也就是你所看到它, 它只能选中前两个.

还有一个问题就是, 你在你的搜索框中 绑定的 keyup 事件, 每次都会重新去画 列表框, 导致你原来的那个 active 的项目丢失.

附改后的代码:

window.onload = function () {
    var search = $('#search');
    var result = $('#search-select');
    var data = ['glen', 'lee', 'chen','liu', 'dong'];
    //输入且即使获得自定义数据li列表
    //删除原始值,输入值获得li,展开ul,并且传入data
    $.on(search, 'keyup', show);
    $.on(document, 'keyup', selected);

    function show(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        var keynum = e.keyCode || e.which;

        //屏蔽 上,下,回车
        switch (keynum) {
            case 38:
            case 40:
            case 13:
                return;
        }

        result.innerHTML = '';
        for (var i = 0; i < data.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = data[i];
            result.appendChild(li);
            $.on(li, 'click', hide);
            $.on(li, 'mouseover', addSelected);
            $.on(li, 'mouseout', removeSelected);
            $.enter(search, enter);
        }
        if (search.value !== '') {
            result.style.display = 'block';
        }
        else {
            result.style.display = 'none';
        }

    }

    //鼠标点击选择、键盘上下enter选择(同时改变input的value)
    function hide() {
        result.style.display = 'none';
    }
    function selected() {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        var keynum = e.keyCode || e.which;
        var i = -1;
        var list = result.childNodes;

        //增加一个循环, 用来找出来, 当前哪个是选中的
        for(var j=list.length; j--; ){
            //因为你创建出来的节点中, 有些还没有 class, 所以你的 hasClass方法会出错
            //为了兼容, 我在这里的if语句中增加 list[j].className 条件
            if(list[j].className && hasClass(list[j], 'active')){
                i = j;
                break;
            }
        }

        //将当前的这个的激活样式移除掉
        if(i >= 0){
            removeClass(list[i], 'active');
        }

        switch (keynum) {
            case 38:
                i--;
                if(i < 0){
                    i = list.length - 1;
                }
                addClass(list[i], 'active');
                search.value = list[i].innerHTML;
                i--;
                break;
            case 40:
                i++;
                //达到最后一个的时候, 跳到第一个
                if(i >= list.length){
                    i = 0;
                }
                addClass(list[i], 'active');
                search.value = list[i].innerHTML;
                break;
            case 13:
                enter();
        }
    }

    function addSelected(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        addClass(target, 'active');
        search.value = target.innerHTML;
    }

    function removeSelected(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        removeClass(target, 'active');
    }

    function enter() {
        var lis = result.childNodes;
        for (var i = 0; i < lis.length; i++) {
            if (lis[i].getAttribute('class') == 'active') {
            search.value = lis[i].innerHTML;
        }
    }
}
}

改动点:

还有你在百度盘发代码的时候, 能不能压缩成一个包? 你的那些文件我是一个一个点下来的 =,=

【热门文章】
【热门文章】