Javascript 覆盖属性的HTML输入_Javascript_Php_Jquery_Html_Ajax

Javascript 覆盖属性的HTML输入

javascript php jquery html ajax

Javascript 覆盖属性的HTML输入,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有一个搜索栏，使用AJAX来显示结果，但输入框覆盖了第一个结果，使其不可点击（你可以看到它，你只是不能点击它），我尝试了所有方法，但我无法使其可点击。这也是第一个，其余的你可以点击 index.php <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;

我有一个搜索栏，使用

AJAX

来显示结果，但输入框覆盖了第一个结果，使其不可点击（你可以看到它，你只是不能点击它），我尝试了所有方法，但我无法使其可点击。这也是第一个，其余的你可以点击

index.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style>

      body
      {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        background:#ccc;
      }

      #display ul
      {
        z-index:200;
        list-style: none;
        margin-top:72px;
        width: 330px;
      }

      #display li
      {
        z-index:200;
        display: block;
        padding: 4px;
        background-color: #eee;
        border-bottom: 1px solid #367;
      }

      #clear
        { clear:both; }

      #search{
        position:absolute;
      }

      a {
        color: black;
        text-decoration:none;
      }

      .cf:before, .cf:after{
         content:"";
         display:table;
      }

     .cf:after{
       clear:both;
     }

     .cf{
       zoom:1;
     }  

     .form-wrapper {
       width: 450px;
       padding: 30px;
       margin: 1px auto 1px auto;
   position:absolute;
       z-index:100;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px;
       clear:both;
     }

    .form-wrapper input {
      padding-left:10px;
      width: 330px;
      height: 40px;
      padding: 0px 0px;
      float: left;    
      font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
      border: 0;
      background: #eee;
      -moz-border-radius: 3px 0 0 3px;
      -webkit-border-radius: 3px 0 0 3px;
      border-radius: 3px 0 0 3px; 
      margin-left:10px;     
    }

    .form-wrapper input:focus {
      outline: 0;
      background: #fff;
      -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
      -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
      box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    }

    .form-wrapper input::-webkit-input-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
    }

    .form-wrapper input:-moz-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
    }

    .form-wrapper input:-ms-input-placeholder {
      color: #999;
      font-weight: normal;
      font-style: italic;
    }    

    .form-wrapper button {
      overflow: visible;
      position: relative;
      float: right;
      border: 0;
      padding: 0;
      cursor: pointer;
      height: 40px;
      width: 110px;
      font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
      color: #fff;
      text-transform: uppercase;
      background: #d83c3c;
      -moz-border-radius: 0 3px 3px 0;
      -webkit-border-radius: 0 3px 3px 0;
      border-radius: 0 3px 3px 0;      
      text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    }   

    .form-wrapper button:hover{     
      background: #e54040;
    }   

    .form-wrapper button:before {
      content: '';
      position: absolute;
      border-width: 8px 8px 8px 0;
      border-style: solid solid solid none;
      border-color: transparent #d83c3c transparent;
      top: 12px;
      left: -6px;
    }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
  function fill(Value)
  {
    $('#name').val(Value);
    $('#display').hide();
  }

  $(document).ready(function(){
    /*
      $("#search").click(function (){
        $("#display").css('display' , 'none');
      });
    */

    $("#name").keyup(function() {
      var name = $('#name').val();
      if(name=="")
      {
        $("#display").html("");
      }
      else
      {
        $.ajax({
          type: "POST",
          url: "backend.php",
          data: "name="+ name ,
          success: function(html){
            $("#display").html(html).show();
          }
        });
      }
    });
  });

    </script>
  </head>
<body>
<div id="search">
  <form method="post" action="searcher.php" class="form-wrapper cf">
<input type="text" placeholder="Search User Pages" name="name" id="name" autocomplete="off" required>
<button type="submit" name="submit" id="submit">Search</button>
  </form>

  <div id="display"></div>

</div>
</body>
</html>


无标题文件
身体
{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
背景：#ccc；
}
#显示ul
{
z指数：200；
列表样式：无；
边缘顶端：72px；
宽度：330px；
}
#显示李
{
z指数：200；
显示：块；
填充：4px；
背景色：#eee；
边框底部：1px实心#367；
}
#清楚的
{清除：两个；}
#搜寻{
位置：绝对位置；
}
a{
颜色：黑色；
文字装饰：无；
}
.cf:之前，.cf:之后{
内容：“；
显示：表格；
}
.cf：之后{
明确：两者皆有；
}
.cf{
缩放：1；
}  
.表格包装{
宽度：450px；
填充：30px；
保证金：1px自动1px自动；
位置：绝对位置；
z指数：100；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
明确：两者皆有；
}
.表单包装器输入{
左侧填充：10px；
宽度：330px；
高度：40px；
填充：0px 0px；
浮动：左；
字体：粗体15px‘lucida sans’、‘trebuchet MS’、‘Tahoma’；
边界：0；
背景：#eee；
-moz边界半径：3px 0 3px；
-webkit边界半径：3px 0 3px；
边界半径：3px 0 3px；
左边距：10px；
}
.表单包装器输入：焦点{
大纲：0；
背景：#fff；
-moz盒阴影：0.2pxRGBA（0,0,0,8）插入；
-webkit盒阴影：0.2pxRGBA（0,0,0,8）插图；
盒影：0.02×rgba（0,0,0,8）插入；
}
.form包装器输入：：-webkit输入占位符{
颜色：#999；
字体大小：正常；
字体：斜体；
}
.表单包装器输入：-moz占位符{
颜色：#999；
字体大小：正常；
字体：斜体；
}
.表单包装输入：-ms输入占位符{
颜色：#999；
字体大小：正常；
字体：斜体；
}    
.表单包装器按钮{
溢出：可见；
位置：相对位置；
浮动：对；
边界：0；
填充：0；
光标：指针；
高度：40px；
宽度：110px；
字体：粗体15px/40px‘lucida sans’、‘投石机MS’、‘Tahoma’；
颜色：#fff；
文本转换：大写；
背景#d83c3c；
-moz边界半径：0 3px 3px 0；
-webkit边界半径：0 3px 3px 0；
边界半径：0 3px 3px 0；
文本阴影：0-1px0RGBA（0,0,0,3）；
}   
.form包装器按钮：悬停{
背景：#e54040；
}   
.表单包装器按钮：在{
内容：''；
位置：绝对位置；
边框宽度：8px 8px 8px 0；
边框样式：实心无；
边框颜色：透明#d83c3c透明；
顶部：12px；
左-6px；
}
函数填充（值）
{
$（'#name'）.val（值）；
$（'#display'）.hide（）；
}
$（文档）.ready（函数（）{
/*
$（“#搜索”）。单击（函数（）{
$（“#display”）.css（'display'，'none'）；
});
*/
$（“#名称”）.keyup（函数（）{
var name=$（'#name'）.val（）；
如果（名称==“”）
{
$（“#显示”）.html（“”）；
}
其他的
{
$.ajax({
类型：“POST”，
url:“backend.php”，
数据：“name=“+name，
成功：函数（html）{
$（“#display”）.html（html）.show（）；
}
});
}
});
});
搜寻

Backend.php

<?php
include('connect.php');
if(isset($_POST['name']))
{
  $name=trim($_POST['name']);
  $query2=mysql_query("SELECT * FROM members WHERE username LIKE '%$name%' LIMIT 5");
  echo "<ul>";
  while($query3=mysql_fetch_array($query2))
  {
?>

     <a href='page.php?user=<?php echo $query3['username']; ?>'><li onclick='fill("<?php echo $query3['username']; ?>")'><?php echo $query3['username']; ?></li></a>

<?php
  }
}
?>
</ul>

问题在于表单包装器元素的填充。填充似乎覆盖了display div。我更改了.form包装的CSS，将填充替换为
.form-wrapper {
   width: 450px;
   padding-left: 30px;
   padding-top:30px;
   margin: 1px auto 1px auto;
   position:absolute;
   z-index:100;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   clear:both;
 }

它是有效的
下面是：
因为您浮动了按钮和输入，所以您将它们从dom流中移除。您可能需要将clear:both添加到显示div中，以便在输入之后显示内容。更好：不要让那些元素浮动。最后，您的列表标记有点奇怪。锚定标记通常位于列表项标记的内部<代码>

我从输入中删除了浮动，如果提交按钮上没有浮动，它就不会在它旁边，我还添加了明确的内容：两者都显示，但它不起作用