100分问javascript通过上下方向键选择DIV的LI内容

各位大侠：我知道table有个row属性，可以用Javascript控制显示的行。
但是怎么控制DIV的li内容。其实就是类似google/百度suggest的功能中，当提示suggest关键字的时候，它们都可以通过方向键控制suggest的内容。我自己简单的实现了suggest显示功能，现在要做通过方向键控制suggest的DIV内容显示比如：<div id='key'><ul>
<li>fashion1</a></li>
<li>fashion2</a></li>
<li>fashion3</a></li>
<li>fashion4</a></li>
<li>fashion5</a></li>
<li>fashion6</a></li>
<li>fashion7</a></li>
<li>fashion8</a></li>
<li>fashion9</a></li>
<li>fashion10</a></li>
<ul></div>我怎么用javascript获取到div并通过键盘的上下方向键来控制显示li的内容~~在线等····急急急····

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

喀，这个我刚做好的，你看下：http://download.csdn.net/source/1198273
aspx页面代码：<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>自动完成</title>
    <style type="text/css">
    #dSuggest {
        z-index:0;
        position:absolute;
        background-color:#ffffff;
    }
    #sug {
        list-style:none;
        border:solid 1px #09f;
        margin-left:0;
        margin-top:0;
        width:300px;
        padding-left:0;/*添加此项，修改在FF中的样式*/
    }
    #sug li {
        width:100%;
        padding-left:2px;
        margin-left:2px;
    }
    #sug span {
        position:absolute;
        z-index:200;
        right:3px;
    }
    .select {
        background-color:#09f;
        color:#ffffff;
        cursor:default;
    }
    </style>
    <script type="text/javascript">
    var XMLHttp=false;
    var j=-1;
    function CreateXMLHttpRequest() {
        if(window.ActiveXObject)
        {
            XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            XMLHttp = new XMLHttpRequest();
        }
        if(!XMLHttp && typeof XMLHttpRequest != 'undefined') {
            XMLHttp = new XMLHttpRequest();
        }
    }

    function GetSuggest(keyword,e) {
        var keyc=GetKeyCode(e);

        if(keyc==40 || keyc==38 || keyc==13)
            return;
        var _url="Search.ashx?keyword="+escape(keyword);

        CreateXMLHttpRequest();
        XMLHttp.onreadystatechange=function(){
            if(XMLHttp.readyState==4) {
                if(XMLHttp.status==200) {
                    $("dSuggest").innerHTML=XMLHttp.responseText;
                    j=-1;
                }
            }
        }
        XMLHttp.open("get",_url,true);
        XMLHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        XMLHttp.send(null);
    }

    function set_style(num) {//设置样式
       for(var i=0;i<$$().length;i++) {
           if(i>=0 && i<$$().length&&i==num) {
                $$()[i].className="select";
           }
           else
           {
              $$()[i].className="";
           }
          }
    }

    function mo(nodevalue) {
        j=nodevalue;
        set_style(j);
    }

    function form_submit() {
        var lis=$$();
        if(lis==null)
            return;
        for(var i=0;i<lis.length;i++) {
            if(lis[i].className=="select") {
                var key=lis[i].innerHTML.substring(0,lis[i].innerHTML.toUpperCase().indexOf("<SPAN>"));
                $('txtKeyword').value=key;
                $("dSuggest").innerHTML="";
            }
        }
    }

    function updown(e) {
        var keyc=GetKeyCode(e);

        if(keyc==40 || keyc==38) {
            if($$()==null)
                return;
            if(keyc==40) {
                j++;
                if(j>=$$().length)
                {
                  j=0;
                }
            } else if(keyc==38) {
                j--;
                if(j==-1)
                    j=$$().length-1;

            }
            set_style(j);
        }
    }

    function GetKeyCode(e) {//取得不同浏览器下的键盘事件值
        var keyc;
        if(window.event) {//ie键盘事件
    keyc=e.keyCode;
    } else if (e.which) {//火狐
keyc=e.which;
    }
    return keyc;
    }

    function $(id) {
        return document.getElementById(id);
    }

    function $$() {
        var ul=$("sug");
        if(ul==null)
            return null;
        return ul.getElementsByTagName("li");
    }
    //getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight
    function getPos(el,sProp) {
        var iPos = 0;
        while (el!=null) {
            iPos+=el["offset" + sProp];
            el = el.offsetParent;
        }
        return iPos;
    }
    function setPosition(obj) {
        $('dSuggest').style.left=getPos(obj,'Left');
        $('dSuggest').style.top=getPos(obj,'Top')+obj.offsetHeight
    }
    </script>

    <style type="text/css">

    </style>
</head>
<body onload="setPosition($('txtKeyword'))">
    <form id="form1" runat="server" onkeypress="if(GetKeyCode(event)==13){return false;}">
    <div>
    <input type="text" onkeydown="if(GetKeyCode(event)==13)form_submit()" onkeyup="GetSuggest(this.value,event);updown(event)" autocomplete="off" id="txtKeyword" />
    <div id="dSuggest"></div>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    </form>
</body>
</html>Search.ashx页面代码
<%@ WebHandler Language="C#" Class="Search" %>using System;
using System.Web;using System.Data.SqlClient;public class Search : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string sKeyword = context.Request["keyword"];
        if (string.IsNullOrEmpty(sKeyword))
        {
            context.Response.End();
        }
        SqlConnection conn = new SqlConnection("Server=(local);Integrated Security=true;DataBase=Northwind");
        SqlCommand cmd = new SqlCommand("select top 10 ProductName,QuantityPerUnit from Products where ProductName like '" + sKeyword + "%';", conn);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            context.Response.Write("<ul id='sug'>");
            int i = 0;
            while (dr.Read())
            {
                context.Response.Write(string.Format("<li value='{0}' onclick=\"form_submit()\" onmouseover=\"mo(this.value)\">{1}<SPAN>{2}</SPAN></li>", i, dr["ProductName"], dr["QuantityPerUnit"]));
                i++;
            }
            context.Response.Write("</ul>");
        }        conn.Close();
        dr.Close();
        cmd.Dispose();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }}
给你个例子，参考一下。应该可以满足你的需求。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SimulateUpDownKeySelect.html</title>
</head> <body>
<h3 style="color: red;">可兼容 IE 和 FireFox 浏览器！</h3>
<input type="text" id="txtInput"/>
<div id="divSelect">
    <li>123</li>
    <li>456</li>
    <li>abc</li>
    <li>def</li>
    <li>zzz</li>
</div>
</body>
<script type="text/javascript">

</script>
</html>
只要把焦点移到<li></li>第一对上！上下箭头就可以在<li></li>之间移动！怎么要用js作
sohighthesky ----------
呵呵，昨天开会去了，早上才看见··用了一下··哈··不错哦··不过有几个小缺憾··1、比如我输入关键词：a；然后会列出一些suggest，等我关闭suggest后，点击text上的a，就不再suggest了，要重输才会suggest2、当列出suggest时，我上下键可以控制suggest选项，但是当我点击了其他空白处后，上下键就失去效果了。原因是失去焦点了，其实点击其他空白处，suggest应该消失。然后针对问题一，我再点击text时候，应该suggest又出现，而不用重新输入··我加了代码，页面onclick事件，原理上应该没错，结果没反应··//鼠标点击其他地方清空提示层
function setNullClick()
{
    $("dSuggest").innerHTML="";  //清空提示层
    $('dSuggest').style.display = "none";  //设置提示层不可见
}
你百度搜索仿google suggest .net 版本，有人仿照做了一个的。你也可以去下载asp版本，其实差不多的，因为javascript部分不用怎么改的，只要把asp部分代码给成.net形式就可以了，实在不行，你联系我，我根据asp改了一个.net版本可以用的。我看2楼的代码好像也是根据那个asp版本改过来的··

100分 问javascript通过上下方向键选择DIV的LI内容

解决方案 »

100分问javascript通过上下方向键选择DIV的LI内容