Question

我正在创建像http://demo.phpgang.com/live-search-php-mysql-jquery/这样的实时搜索，我在代码中遇到了一个小问题

jQuery("#result").on("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded);

代码来自http://www.phpgang.com/how-to-integrate-live-search-in-php-and-mysql-with-jquery_309.html

问题 - 我面临的问题是，当我搜索某些内容时，它会正确显示结果，但是当我点击结果时，没有任何反应，当我点击它时，我希望在输入框中显示结果。谢谢你需要帮助

这是一个完整的代码

的index.php

<?php

   $content ='<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(); 
}
  });

  });
      </script>

      <style type="text/css">
 .content{
    width:900px;
    margin:0 auto;
 }
 #searchid
 {
    width:500px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
 }
 #result
 {
    position:absolute;
    width:500px;
    padding:10px;
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show
{
    padding:1px; 

    font-size:15px; 
    height:50px;
}
.show:hover
{
    background:#4c66a4;
    color:#FFF;
    cursor:pointer;
 }

 <div class="content">
  <input type="text" class="search" id="searchid" placeholder="Search for         
  people" /><br /> 
   <div id="result"></div>
  </div>';


   $pre = 1;
  include("html.inc");
   ?>

的search.php

 <?php
 include('db.php');
if($_POST)
{
$q = mysqli_real_escape_string($connection,$_POST['search']);
$strSQL_Result = mysqli_query($connection,"select id,name,email from seller    
where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysqli_fetch_array($strSQL_Result))
{
    $username   = $row['name'];
    $email      = $row['email'];
    $b_username = '<strong>'.$q.'</strong>';
    $b_email    = '<strong>'.$q.'</strong>';
    $final_username = str_ireplace($q, $b_username, $username);
    $final_email = str_ireplace($q, $b_email, $email);
    ?>
        <div class="show" align="left">
         <span class="name"><?php echo $final_username; ?></span>&nbsp;<br/>  
     <?php echo $final_email; ?><br/>
        </div>
    <?php
    }
   }
   ?>

Answer 1

您的代码存在一些问题。让我们从

开始

var $name = $clicked.find(\'.name\').html();

这里.不是JS中连接的有效运算符。它用于PHP。要连接字符串，请使用+。

其次，使用\'.name.\'作为输入来查找选项。我想这个名字已经是一个字符串？除非这是PHP中echo的一部分，否则您不需要额外转义'。只需使用'开始一个字符串。

接下来是：

var decoded = $("<div/>").html($name).text();

<div/>不是有效的选择器。简单地使用div。

在这里查看jsfiddle以获取链接中的固定代码： https://jsfiddle.net/1mss5xwj/1/

jquery实时搜索无法正常工作

1 个答案: