標簽-仿百度搜索框只能提示上下鍵移動的功能效果 js+jquery

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

搜索結果不能上下移動，只能按一下，按第二下的時候結果只剩下一個了，currentSelIndex總是為0

，currentSelIndex是記錄

標簽id的變量。
首先，我輸入一個字符，匹配到的結果會在文本框下方顯示出來。因為代碼都是寫在搜索框的onkeyup

()事件中的，每按一下鍵盤都會觸發該事件，當我第一次按（下）鍵的時候，相應的會把選中的文本賦

給搜索框，所以按第二次的時候又會重新觸發該事件，搜索條件變成了第一次按（下）鍵文本的值。導

致搜索結果集的長度變成了1，currentSelIndex總是為0。

最佳回答：

重寫寫個給你算了，都導入jquery了干嘛還用自己寫js代碼

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