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

Question

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

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

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

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

Answer 1

  <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>