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

Posted

技术标签:

【中文标题】如何从自动完成文本框中单击名称？【英文标题】：how to click a name from auto complete text box? 【发布时间】：2016-08-28 05:19:12 【问题描述】：

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

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

【问题讨论】：

什么是jQuery(document).live("click")？ live 事件在 jQuery 1.8 中也被弃用了。 猜猜他想要像$("#result").on("click", ".name", function (e)这样的东西 你可以在jsfiddle中添加代码吗？ 【参考方案1】：

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

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

检查此代码后告诉我。

【讨论】：

以上是关于如何从自动完成文本框中单击名称？的主要内容，如果未能解决你的问题，请参考以下文章

从自动完成中选择的事件

从文本字段捕获数据时如何忽略自动完成值？

文本框中的自动完成文本

处理文本框中的自动完成。不同于按回车

如何仅在多个自动完成文本框中的前 2 个字符之后才开始自动完成？

Jquery ui自动完成填充带有ID​​的隐藏字段