残缺丶 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条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB动图的问题
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名