个人中心
gpt4 book ai didi

javascript - 如何从自动完成文本框中单击名称？

转载 作者：行者123 更新时间：2023-11-28 02:56:01 24 4
gpt4 key购买 nike

我在自动完成文本框中有一个从我的数据库中检索到的名称列表。当我单击自动完成文本框中的任何元素时，我需要显示该记录，但现在我无法显示记录.有人请帮助我...这是我的代码......

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function ()
{
    $(".search").keyup(function ()
    {
        var searchid = $(this).val();
        var dataString = 'search=' + searchid;
        if (searchid != '')
        {
            $.ajax(
            {
                type: "POST",
                url: "search.php",
                data: dataString,
                cache: false,
                success: function (html)
                {
                    $("#result").html(html).show();
                }
            });
        }
        return false;
    });
    jQuery("#result").live("click", function (e)
    {
        var $clicked = $(e.target);
        var $name = $clicked.find('.name').html();
        var decoded = $("<div/>").html($name).text();
        $('#searchid').val(decoded);
    });
    jQuery(document).live("click", function (e)
    {
        var $clicked = $(e.target);
        if (!$clicked.hasClass("search"))
        {
            jQuery("#result").fadeOut();
        }
    });
    $('#searchid').click(function ()
    {
        jQuery("#result").fadeIn();
    });
});
</script>
 <style type="text/css">
   body{ 
     font-family:Tahoma, Geneva, sans-serif;
     font-size:18px;
    }
    .content{
    width:50x;
    margin:0 auto;
}
#searchid
{
    width:200px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
}
#result
{
    position:absolute;
    width:200px;
    padding:10px;
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show
{

    font-size:15px; 
    height:30px;
}
.show:hover
{
    background:#4c66a4;
    color:#FFF;
    cursor:pointer;
 }
</style>
</head>

 <body>
 <form autocomplete="off">
     <div class="content">
         <input type="text" class="search" id="searchid" name="search"    placeholder="Search for people" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br /> 
         <div id="result">
         </div>
     </div>
  </form>
  </body>
 </html>

search.php

<?php
include('connection.php');
if($_POST)
{
     $search=$_POST['search'];
     $sql_res=mysql_query("select * from students WHERE name LIKE '$search%'      OR name='$search'");
      while($row=mysql_fetch_array($sql_res))
      {
          $username=$row['name'];
          $b_username='<strong>'.$search.'</strong>';
          $final_username = str_ireplace($search, $b_username, $username);
 ?>
 <div class="show" align="left">
 <?php echo $final_username;?></div>
 <?php
      }
  }
  ?>
  <?php
  if($_GET!=NULL)
  {
      $search=$_GET['search'];
      echo $search;
      $sql=mysql_query("select * from employee where name='$search'");
  ?>
  <table border="1">
   <tr><th>id</th><th>Name</th><th>Email</th><th>Age</th><th>School Name</th>     </tr>
  <?php
  while($row=mysql_fetch_array($sql))
  {
  ?>
  <tr>
  <td><?php echo $row['id'];?></td>
  <td><?php echo $row['name'];?></td>
  <td><?php echo $row['email'];?></td>
  <td><?php echo $row['age'];?></td>
  <td><?php echo $row['school_name'];?></td>
  </tr>
  <?php
  }
}
?>
</table>

最佳答案

使用此代码，它将起作用。我已经编辑了你的代码并用我的测试表进行了测试

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style type="text/css">
   body{ 
     font-family:Tahoma, Geneva, sans-serif;
     font-size:18px;
    }
    .content{
    width:50x;
    margin:0 auto;
}
#searchid
{
    width:200px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
}
#result
{
    position:absolute;
    width:200px;
    padding:10px;
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show
{

    font-size:15px; 
    height:30px;
}
.show:hover
{
    background:#4c66a4;
    color:#FFF;
    cursor:pointer;
 }
</style>
</head>

 <body>
 <form autocomplete="off">
 <div class="content">
 <input type="text" class="search" id="searchid" name="search"    placeholder="Search for people" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br /> 
   <div id="result">
   </div>

   <div id="records"></div>
   </div>
   </form>

<script type="text/javascript">
jQuery(function(){
  jQuery(".search").keyup(function() 
  { 
    var searchid = jQuery(this).val();
    var dataString = 'search='+ searchid;
    if(searchid!='')
    {
      jQuery.ajax({
        type: "POST",
        url: "search.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
        jQuery("#result").html(html).show();
        }
      });
    }return false;    
  });
});

function selValue(id, value){
  jQuery('#searchid').val(value);
  displayRec(id);
  jQuery("#result").html('').hide();
}

function displayRec(id){
  var dataString = 'searchid='+ id;
  jQuery.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(data)
    {
    jQuery("#records").html(data);
    }
  });
}
</script>

  </body>
</html>

搜索.php

<?php
mysql_connect("localhost", "root", "");
mysql_select_db("cdcol");


if(isset($_POST['search']))
{

  $search = $_POST['search'];

     $search=$_POST['search'];
     $sql_res=mysql_query("select * from cds WHERE interpret LIKE '%$search%'      OR interpret='$search'");
  while($row=mysql_fetch_array($sql_res))
  {
      $id=$row['id'];
      $username=$row['interpret'];
      $b_username='<strong>'.$search.'</strong>';
      $final_username = str_ireplace($search, $b_username, $username);
      ?>
      <div class="show" align="left" onclick="return selValue('<?php echo $id; ?>', '<?php echo $final_username; ?>');"><?php echo $final_username;?></div>
     <?php
      }
}

if(isset($_POST['searchid']))
    {

       $search=$_POST['searchid']; 
       $sql=mysql_query("select * from cds where id='$search'");?>
    <table border="1">
   <tr><th>id</th><th>Name</th><th>Email</th><th>Age</th></tr>
     <?php
      while($row=mysql_fetch_assoc($sql))
      {
        ?>
    <tr>
    <td><?php echo $row['id'];?></td>
    <td><?php echo $row['interpret'];?></td>
    <td><?php echo $row['titel'];?></td>
    <td><?php echo $row['jahr'];?></td>
     </tr>
      <?php
      }
    }
?>
</table>

检查此代码后请告诉我。

关于javascript - 如何从自动完成文本框中单击名称？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36999440/

24 4 0
文章推荐： c++ - pthread_mutex_lock 上的核心转储
文章推荐： javascript - 具有保存位置的 jquery 菜单
文章推荐： c++ - QThreaded C++ 守护程序未正常关闭
文章推荐： javascript - 将 jqGrid 与 ArrayData 结合使用并使用添加、编辑和删除按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com