仿百度搜索框只能提示上下键移动的功能效果 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>

你那里有电子邮箱吗，需要的话给你一个js例子。

shenyinping6@sina.com 谢谢！

这是我的onkeyup()事件的代码。

//键盘按下事件
function selectItem(keyword, event) {
var arr = ["orage", "苹果", "lisa", "2123", "like", "jack", "abcdefg", "pig", "芒果", "shirly", "xg", "One", "live", "Two", "Four"];
if (keyword != "") {
var nPos;
var array = [];//创建一个空数组，存储匹配到的结果
for (var i in arr) {
var sTxt = arr[i] || '';
nPos = find(keyword, sTxt);
if (nPos >= 0) {
array[array.length] = sTxt;
}
}
var list = "";
var indexNum = 0;
for (i = 0; i < array.length; i++) {
list += "

" + array[i] + "";
indexNum++;
}
$("#ul").html(list);
document.getElementById("ul").style.display = "block";
}
var currentSelIndex = -1;
var oldSelIndex = -1;
//当文本框没有值的时候按退格键或回车键返回false
if (keyword == "" && event.keyCode == 8 || event.keyCode == 13) {
document.getElementById("ul").style.display = "none";
liLength = 1;
return false;
}
else { //上移
liLength = document.getElementById("ul").getElementsByTagName("li").length;; //获取列表数量

if ((event.keyCode == 38 || event.keyCode == 40) && document.getElementById("ul").style.display != "none") {
if (liLength > 0) {
oldSelIndex = currentSelIndex;
if (event.keyCode == 38) {
if (currentSelIndex == -1) {
currentSelIndex = liLength - 1;
}
else {
currentSelIndex = currentSelIndex - 1;
if (currentSelIndex < 0) {
currentSelIndex = liLength - 1;
}
}
if (currentSelIndex != -1) {
document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#d4eef7";
document.getElementById("txtConten").value = document.getElementById("li_" + currentSelIndex).innerText;
}
if (oldSelIndex != -1) {
document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";
}
}//下移
if (event.keyCode == 40) {
if (currentSelIndex == liLength - 1) {
currentSelIndex = 0;
}
else {
currentSelIndex = currentSelIndex + 1;
if (currentSelIndex > liLength - 1) {
currentSelIndex = 0;
}
}
if (currentSelIndex != -1) {
document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#d4eef7";
document.getElementById("txtConten").value = document.getElementById("li_" + currentSelIndex).innerText;
}
if (oldSelIndex != -1) {
document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";
}
}
}
}
else if (event.keyCode == 13) {
if (document.getElementById("ul").style.display != "none" && liLength > 0 && currentSelIndex != -1) {
document.getElementById("txtConten").value = document.getElementById("li_" + currentSelIndex).innerText;
document.getElementById("ul").style.display = "none";
currentSelIndex = -1;
oldSelIndex = -1;
}
}
else {
//autoComplete(keyword);
document.getElementById("ul").style.display = "";
currentSelIndex = -1;
oldSelIndex = -1;
}
}
setHeightKeyWord('ul', keyword, '#1049e8', true);
}

http://ask.csdn.net/questions/176670#answer_59216

 <input type="text" onblur="hidePop()" id="txt" onfocus="document.getElementById('pop').style.display = 'block' "/>
<div id="pop" style="border:solid 1px #000;width:150px;height:300px">
<ul><li onclick="setTxt(this)">1</li>
<li onclick="setTxt(this)">2</li>
<li onclick="setTxt(this)">3</li></ul>
</div>
<script type="text/javascript">
    var timer;
    function hidePop() {
        timer = setTimeout(function () {
            document.getElementById('pop').style.display = 'none' 
        },200);
    }
    function setTxt(o) {
        clearTimeout(timer);//要隐藏去掉这句，不隐藏增加这句清除计时器
        document.getElementById('txt').value = o.innerHTML;
    }
</script>