残缺丶 2015-04-21 05:49 采纳率: 56%
浏览 2801
已采纳

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

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

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

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

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

  • 写回答

2条回答

  • Go 旅城通票 2015-04-21 06: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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择