2 qq 19755427 qq_19755427 于 2015.04.21 13:49 提问

仿百度搜索框只能提示上下键移动的功能效果 js+jquery

搜索结果不能上下移动,只能按一下,按第二下的时候结果只剩下一个了,currentSelIndex总是为0

,currentSelIndex是记录
标签id的变量。
首先,我输入一个字符,匹配到的结果会在文本框下方显示出来。因为代码都是写在搜索框的onkeyup
()事件中的,每按一下键盘都会触发该事件,当我第一次按(下)键的时候,相应的会把选中的文本赋

给搜索框,所以按第二次的时候又会重新触发该事件,搜索条件变成了第一次按(下)键文本的值。导

致搜索结果集的长度变成了1,currentSelIndex总是为0。

2个回答

showbo
showbo   Ds   Rxr 2015.04.21 14:28
已采纳
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<input type="text" onkeyup="selectItem(this,event)" onfocus="selectItem(this,event)" id="txt" onblur="hideUL()"/>
<ul id="ul"></ul>
<style>.focus{background:#1049e8;color:#fff}</style>
<script type="text/javascript">
    //键盘按下事件
    Array.prototype.filter = function (v) { var r = []; for (k in this) if (this[k].indexOf(v) != -1) r.push(this[k]); return r; }
    var arr = ["orage", "苹果", "lisa", "2123", "like", "jack", "abcdefg", "pig", "芒果", "shirly", "xg", "One", "live", "Two", "Four"];
    var timer;
    function hideUL() { timer = setTimeout(function () { $('#ul').hide(); }, 200); }
    function selectItem(txt, event) {
        switch (event.keyCode) {
            case 38: //上
                var li = $('#ul li'), fli = li.filter('.focus');
                li.removeClass('focus');
                if (fli.length == 0 || fli.prev().length==0) li.filter(':last').addClass('focus');
                else fli.prev().addClass('focus');
                break;
            case 40: //下
                var li = $('#ul li'), fli = li.filter('.focus');
                li.removeClass('focus');
                if (fli.length == 0 || fli.next().length==0) li.filter(':first').addClass('focus');
                else fli.next().addClass('focus');
                break;
            case 13: //回车
                var li = $('#ul li.focus');
                if (li.length > 0) {
                    $('#txt').val(li.text());
                    li.parent().hide();
                }
                break;
            default:
                if (txt.value != '') {
                    var r = arr.filter(txt.value);
                    $('#ul').html($(r).map(function () { return '<li>' + this + '</li>' }).get().join('')).show()
                    .find('li').click(function () { clearTimeout(timer); $('#txt').val(this.innerHTML) });
                } else $('#ul').hide();
        }
    }
</script>
qq_19755427
qq_19755427 我把你写的这段代码带进去了,其他的效果都有,也能正确的匹配到结果,不过按上下键没反应,我调试了,它不进去这段代码?怎么搞啊?
大约 2 年之前 回复
qq_19755427
qq_19755427 我把你写的这段代码带进去了,其他的效果都有,也能正确的匹配到结果,不过按上下键没反应,我调试了,它不进去这段代码?怎么搞啊?
大约 2 年之前 回复
qq_19755427
qq_19755427 我把你写的这段代码带进去了,其他的效果都有,也能正确的匹配到结果,不过按上下键没反应,我调试了,它不进去这段代码?怎么搞啊?
大约 2 年之前 回复
TankeCS
TankeCS   2017.04.17 18:01

我用的onkeydown事件

Csdn user default icon
上传中...
上传图片
插入图片