如何让table标签里的东西处于顶层

有你_才有梦想 2007-12-22 03:50:05

我在用autosuggest做自动提示(就是像GOOGLE搜索)的时候，虽然效果出来了，但是下拉的内容把页面自动拉长，不能覆盖下面的东西，怎么样才能不让页面自动拉长，并像日期控件一样盖住下面的东西啊
我的代码如下：
<asp:Label ID="Label4" runat="server" Text="商品编号" Width="50px"></asp:Label>
<Anthem:AutoSuggestBox runat="server" ID="TxtSpbh" DataKeyField="Pro_Id" TextBoxDisplayField="Pro_Id"
ItemNotFoundMessage="此商品编号未被使用" Required="true" Width="95px" OnTextChanged="TxtSpbh_TextChanged" >
<HeaderTemplate>
<table border="0" width="200px" cellpadding="0" cellspacing="0">
<tr>
<td align="left" width="30%" >
<b>
商品编号
</b>
</td>
<td align="right" >
<b>
商品名称
</b>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table border="0" width="200px" cellpadding="0" cellspacing="0">
<tr>
<td align="left" width="30%">
<%# ((DataRowView)Container.DataItem)["Pro_Id"] %>
</td>
<td align="right" >
<%# ((DataRowView)Container.DataItem)["Pro_Name"] %>
</td>
</tr>
</table>
</ItemTemplate>
</Anthem:AutoSuggestBox>
<asp:Label ID="Label5" runat="server" Text="商品名称" Width="50px"></asp:Label>
<asp:TextBox ID="TxtSpmc" runat="server" Width="118px"></asp:TextBox>

...全文

233 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

LikeCode 2007-12-23

打赏
举报

修改别人代码是一件非常让人烦工作.
我给个演示代码你参考一下吧,也是用TABLE,其实实现你的需求很简单,就是将建议条目那一行tr的position设为absolute就是了.

文件名:WordSuggest.aspx
实现的是搜索northwind的表comstmers的字段 customerid;
.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WordSuggest.aspx.cs" Inherits="WordSuggest" %>



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

    .CInput{border:solid 1px gray;width:300px}

    #divSuggestions{border:solid 1px gray;width:300px;background:#fff;visibility:hidden}

    #divSuggestions span{display:block;padding:3px}

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <h1>搜索建议 DEMO</h1>

    <span>http://www.code-studio.net </span>

    <hr />

    <table style="border-collapse:collapse;"><tr><td><asp:TextBox ID="txtInput" runat="server" CssClass="CInput" onkeyup="sendRqt(this)"></asp:TextBox>

    <asp:Button ID="Button1" runat="server" Text="Submit" /></td></tr>

    <tr style="position:absolute;"><td><div id="divSuggestions"></div></td></tr></table>

    <span>http://www.code-studio.net http://www.code-studio.net http://www.code-studio.net</span></div>

    </form>

    <script type="text/javascript">

    var xhr;

    var isIe=window.navigator.appName.indexOf("Netscape") == -1?true:false;



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

    function crtRqt(){

        if(window.ActiveXobject)

            xhr=new ActiveXObject("Microsoft.XMLHTTP");

        else xhr=new XMLHttpRequest();

    }

    function sendRqt(srcElm){

        var sInput=srcElm.value;

        if(sInput!=""){

            var url="wordsuggest.aspx?t="+new Date().getTime()+"&w="+sInput;

            crtRqt();

            xhr.onreadystatechange=hdlRsp;

            xhr.open("GET",url,true);

            xhr.send(null);

        }

        else $("divSuggestions").style.visibility="hidden";

    }

    function hdlRsp(){

        if(xhr.readyState==4&&xhr.status==200){

            var rspText=xhr.responseText;

            var oDiv=$("divSuggestions");

            if(rspText!=""){

                var arrRspText=xhr.responseText.split(',');

                var sInnerHtml="";

                for(var i=0;i<arrRspText.length;++i){

                    sInnerHtml+="<span onmouseover='setStyle(this,true)' onmouseout='setStyle(this,false)'"

                                +" onclick='setInput(this)'>"+arrRspText[i]+"</span>";

                }

                oDiv.innerHTML=sInnerHtml;

                oDiv.style.visibility="visible";

            }

            else oDiv.style.visibility="hidden";

        }

    }

    function setStyle(srcElm,bOver){

        srcElm.style.background=bOver?"orange":"";

    }

    function setInput(srcElm){

        $("<%=txtInput.ClientID %>").value=srcElm.innerHTML;

    }

    </script>

</body>

</html>

.cs

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;



public partial class WordSuggest : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        string strInput = string.IsNullOrEmpty(Request.QueryString["w"]) ? string.Empty : Request.QueryString["w"];

        if (strInput.Trim().Length != 0)

        {

            Suggeste(strInput);

        }

    }



    private void Suggeste(string originalStr)

    {

        SqlConnection conn = new SqlConnection("data source=localhost;database=northwind;user id=sa;password=neusoft");

        //string cmdText = string.Format("SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE '{0}%'", originalStr);

        string cmdText = "SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE @w";

        SqlParameter para = new SqlParameter("@w", string.Format("{0}%", originalStr));

        SqlCommand cmd = new SqlCommand();

        cmd.Connection = conn;

        cmd.CommandText = cmdText;

        cmd.Parameters.Add(para);

        conn.Open();

        SqlDataReader reader = cmd.ExecuteReader();

        System.Text.StringBuilder sb = new System.Text.StringBuilder();

        while (reader.Read())

        {

            sb.AppendFormat("{0},", reader[0]);

        }

        reader.Close();

        conn.Close();

        Response.ContentType = "text/plain";

        Response.Clear();

        if (sb.Length != 0)

        {

            Response.Write(sb.ToString().Remove(sb.Length - 1));

        }

        else

        {

            Response.Write(string.Empty);

        }

        Response.Flush();

        Response.Close();

    }

}