js前端显示


以下是我的代码，希望大家帮我修改一下，我想让教师后面那个文本框搜索到的信息在前端显示：
function getSearchKeys()
{
  var s= txtName.value;
  if(s=='')
  {
  divShow.style.display = "none";
   
  return;
  }
  var arr=['<ul>'];
  for(var i=0;i<keys.length;i++)
  {
  if(keys[i].indexOf(s)>=0)
  {
  arr.push('<li>'+keys[i]+'</li>');
  }  
   
  }  
  if(arr.length ==1)
  { 
  alert("没有这个姓名！");
  }
  if(arr.length>1)
  {
  arr.push('</ul>');
  divShow.innerHTML = arr.join('');
  divShow.style.display = "block";
  }
  else
  {
  divShow.style.display = "none";  
  }
}

解决方案 »

  1.   

    function getSearchKeys()
    {
      var s= txtName.value;
      if(s=='')
      {
      divShow.style.display = "none";
        
      return;
      }
      var arr=['<ul>'];
      for(var i=0;i<keys.length;i++)
      {
      if(keys[i].indexOf(s)>=0)
      {
      arr.push('<li>'+keys[i]+'</li>');
      }   
        
      }   
      if(arr.length ==1)
      {  
      alert("没有这个姓名！");
      }
      if(arr.length>1)
      {
      arr.push('</ul>');
      divShow.innerHTML = arr.join('');
      divShow.style.display = "block";
      divShow.style.cssText="z-index:99";
      }
      else
      {
      divShow.style.display = "none";   
      }
    }
      

  2.   

    加了一句   divShow.style.cssText="z-index:99"; 把Z轴的大小提高了
      

  3.   


    我知道为什么了  你把样式写在属性后面了那这样试试
    function getSearchKeys()
    {
      var s= txtName.value;
      if(s=='')
      {
      divShow.style.display = "none";
        
      return;
      }
      var arr=['<ul>'];
      for(var i=0;i<keys.length;i++)
      {
      if(keys[i].indexOf(s)>=0)
      {
      arr.push('<li>'+keys[i]+'</li>');
      }   
        
      }   
      if(arr.length ==1)
      {  
      alert("没有这个姓名！");
      }
      if(arr.length>1)
      {
      arr.push('</ul>');
      divShow.innerHTML = arr.join('');
      divShow.style.display = "block";
      var css=divShow.style.cssText;
      css+="z-index:99";
      divShow.style.cssText=css;
      }
      else
      {
      divShow.style.display = "none";   
      }
    }
      

  4.   

    <script type="text/javascript">
        var keys=<%=tip%>;   //从数据中读取数据
        var txtName ;
       var divShow ;
        window.onload=function()
        {
         txtName =document.getElementById("txtName");
         divShow = document.getElementById("divShow");
         var p =getAbsPoint(txtName);
         divShow.style.left = p.x +'px';
         divShow.style.top =p.y + txtName.offsetHeight + 'px';
         txtName.onclick = divShow.onclick=function(e)
         {
             e = e||event;
             var t = e.target||e.srcElement
            if(t.tagName.toLowerCase()=='li')
            {
               txtName.value = t.innerHTML; 
               divShow.style.display = "none";
              
               return;
            }
            if(e && e.stopPropagation){
              //W3C取消冒泡事件
              e.stopPropagation();
              
              }else{
              //IE取消冒泡事件
              window.event.cancelBubble = true;
              
              }
        };
        document.body.onclick=function(e)
        {
            divShow.style.display = "none";
           
        };
    };
    function getSearchKeys()
    {
      var s= txtName.value;
        if(s=='')
        {
            divShow.style.display = "none";
            
            return;
        }
          var arr=['<ul>'];
          for(var i=0;i<keys.length;i++)
          {
            if(keys[i].indexOf(s)>=0)
            {
               arr.push('<li>'+keys[i]+'</li>');
            }  
          
          }   
            if(arr.length ==1)
            { 
               alert("没有这个姓名！");
            }
            if(arr.length>1)
            {
             arr.push('</ul>');
             divShow.innerHTML = arr.join('');
             divShow.style.display = "block";
             var css=divShow.style.cssText;
             css+="z-index:99";
            divShow.style.cssText=css;
             
            }
            else
            {
              divShow.style.display = "none";                
            }
    }
    function getAbsPoint(e)
    {
        var x = e.offsetLeft;
        var y = e.offsetTop;
        while(e = e.offsetParent)
        {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        return {"x": x, "y": y};
    }    </script>
      

  5.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="choose.aspx.cs" Inherits="stuview_choose" %><!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>
        <link rel="Stylesheet" href="../CSS/1.css" type="text/css" />
        <style type="text/css">
            html, body
            {
                width: 100%;
                height: 100%;
            }
            ul
            {
                padding: 0px;
                margin: 0px;
                list-style: none;
            }
            li
            {
                cursor: pointer;
                padding: 0px 5px;
                line-height: 25px;
                height: 25px;
            }
            .style1
            {
                width: 105px;
            }
        </style>    <script type="text/javascript">
        var keys=<%=tip%>;   //从数据中读取数据
        var txtName ;
       var divShow ;
        window.onload=function()
        {
         txtName =document.getElementById("txtName");
         divShow = document.getElementById("divShow");
         var p =getAbsPoint(txtName);
         divShow.style.left = p.x +'px';
         divShow.style.top =p.y + txtName.offsetHeight + 'px';
         txtName.onclick = divShow.onclick=function(e)
         {
             e = e||event;
             var t = e.target||e.srcElement
            if(t.tagName.toLowerCase()=='li')
            {
               txtName.value = t.innerHTML; 
               divShow.style.display = "none";
              
               return;
            }
            if(e && e.stopPropagation){
              //W3C取消冒泡事件
              e.stopPropagation();
              
              }else{
              //IE取消冒泡事件
              window.event.cancelBubble = true;
              
              }
        };
        document.body.onclick=function(e)
        {
            divShow.style.display = "none";
           
        };
    };
    function getSearchKeys()
    {
      var s= txtName.value;
        if(s=='')
        {
            divShow.style.display = "none";
            
            return;
        }
          var arr=['<ul>'];
          for(var i=0;i<keys.length;i++)
          {
            if(keys[i].indexOf(s)>=0)
            {
               arr.push('<li>'+keys[i]+'</li>');
            }  
          
          }   
            if(arr.length ==1)
            { 
               alert("没有这个姓名！");
            }
            if(arr.length>1)
            {
             arr.push('</ul>');
             divShow.innerHTML = arr.join('');
             divShow.style.display = "block";
             var css=divShow.style.cssText;
             css+="z-index:99";
            divShow.style.cssText=css;
             
            }
            else
            {
              divShow.style.display = "none";                
            }
    }
    function getAbsPoint(e)
    {
        var x = e.offsetLeft;
        var y = e.offsetTop;
        while(e = e.offsetParent)
        {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        return {"x": x, "y": y};
    }    </script></head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
             </asp:ScriptManager>
        <div align="center">
            <h3>
                请按照表上的顺序选择本班任课老师！</h3>
            <table>
                <tr>
                    <td style="height: 80px;">
                        <asp:Label ID="Label1" runat="server" Text="教师查找"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" Width="80px"  onkeyup='getSearchKeys()'></asp:TextBox>
                        <%-- <input type='text' id='txtName' style="width:80px"  onkeyup='getSearchKeys()'  />--%>
                        <div id='divShow' style="position: absolute; z-index: 9999; width: 80px; height: auto;
                            display: none; background-color: White; font-size: 12px; border: 1px solid #ddd">
                        </div>
                    </td>
                    <td>
                        <asp:Button ID="Btn" runat="server" Text="确&nbsp;&nbsp;定" OnClick="Btn_Click" />
                    </td>
                    <td>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:Label ID="lbl" runat="server" Text="交表人数"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtCount" runat="server" Width="80px"></asp:TextBox>
                    </td>
                    <td>
                        <asp:Button ID="BtnAdd" runat="server" Text="确&nbsp;&nbsp;定" OnClick="BtnAdd_Click" />
                    </td>
                </tr>
            </table>
            <table style="width: 347px; height: 42px;">
            <tr>
            <td>全校教师</td>
            <td class="style1">&nbsp;</td>
            <td>已选择待评教师</td>
            </tr>
            </table>
            <table style="width: 330px;">
                <tr>
                    <td>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                   <asp:ListBox ID="lbxSource" runat="server" Height="200px" SelectionMode="Multiple"
                            Width="150px" ForeColor="Black" Rows="20" Font-Size="12px" AutoPostBack="true">
                        </asp:ListBox>
                    </ContentTemplate>                </asp:UpdatePanel>
                        
                    </td>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <asp:Button ID="btnToRight" runat="server" Text=">" Width="30px" CommandName="ToRight"
                                        OnCommand="listBoxOperate_OnCommand" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                &nbsp;
                                    <%--<asp:Button ID="btnAllToRight" runat="server" Text=">>" CommandName="AllToRight"
                                        OnCommand="listBoxOperate_OnCommand" Width="30px" />--%>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Button ID="btnDel" runat="server" Text="<" CommandName="ToLeft" OnCommand="listBoxOperate_OnCommand"
                                        Width="30px" />
                                </td>
                            </tr>
                            <tr>
                                <td> &nbsp;
                                    <%--<asp:Button ID="btnAllDel" runat="server" Text="<<" CommandName="AllToLeft" OnCommand="listBoxOperate_OnCommand"
                                        Width="30px"  />--%>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <asp:ListBox ID="lbxTo" runat="server" Height="200px" SelectionMode="Multiple" Width="150px">
                        </asp:ListBox>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>
      

  6.   

      divShow.innerHTML = arr.join('');
      divShow.style.display = "block";
      var css=divShow.style.cssText;
      css+=";z-index:99";
      divShow.style.cssText=css;改成这样就行了
      

  7.   

    我用IE试的，还是不行啊，你用的是哪个浏览器啊？你加我QQ呗！
      

  8.   

    div.style.display = "none";
    div.zIndex = 99;
    div.style.pixelLeft = xy[0] ; 
    div.style.pixelTop = xy[1];
    div.style.position = "absolute";
      

  9.   


    是加在if(arr.length>1)里面吗？我试了还是不行啊！
      

  10.   

    <!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>kk</title>
    </head>
    <body>
    <div style='position:absolute;width:100px;height:300px;border:solid 1px blue;background-color:white;display:block;left:0px;top:0'>
    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
    </div>
    <iframe style='position:absolute;width:100px;height:300px;border:solid 1px ;background-color:white;display:block;left:110px;top:0;' frameborder='0'>

    </iframe>
    <div style='position:absolute;left:110px;top:0;' >
    <div style='position:relative'>
    <div style='position:absolute;width:99px;height:300px;border:solid 1px blue;background-color:white;display:block;left:1px;top:0'>
    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
    </div>
    </div>
    </div>

    <br><br><br><br><br>
    <select multiple='true' style = 'width:200px;height:300px;margin-left:50px;' >
    </select>
    </body>
    </html>
      

  11.   

    楼上，你的方法不行的呀，我的是用javascript写的！
      

  12.   

    问题解决了，感谢大家！我这样改的height:70px; overflow:auto; visibility:hidden;感谢楼上