jquery live search not working

Question

hii i am creating a live search like this http://demo.phpgang.com/live-search-php-mysql-jquery/ and i am having a small problem in code this

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);

the codes are taken from here http://www.phpgang.com/how-to-integrate-live-search-in-php-and-mysql-with-jquery_309.html

Problem - The problem i am facing is that when i search something it shows results correctly but when i click on result then nothing happens i want that result in input box when i click it. thanks help needed

here is a complete code

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
    }
   }
   ?>

You're binding to elements that don't exist at the time of `.on` - see this question/answer: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Sep 09 '16 at 08:25

Palash · Answer 1 · 2016-09-09T08:30:05.050

0

There are few issues with your code. Let's start with

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

Here . is not a valid operator for concatenation in JS. It is used in PHP. To concatenate strings, use +.

Secondly, using \'.name.\' as input to find option. I suppose that name is already a string? You don't need extra escaping of ' unless that is part of echo in PHP. Simply use ' to start a string.

Next is:

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

<div/> is not a valid selector. Use div simply.

Check the jsfiddle here for fixed code from your link: https://jsfiddle.net/1mss5xwj/1/

edited Sep 09 '16 at 08:30

answered Sep 09 '16 at 08:25

Palash

498
4
12

".name" means find elements with class name. No idea why the ' is escaped, but has no impact in js. `$("
").html(...)` is a common construct to get html into jquery without creating DOM elements (although not needed here as they are already DOM elements) – freedomn-m Sep 09 '16 at 08:28
It's probably supposed to be dynamically written (echo in PHP). That is why they are escaping all single quotes. – Palash Sep 09 '16 at 08:29
i have update complete code now please tell where i have to do the changes – Anay Pareek Sep 09 '16 at 08:47
thank u @Maxzeroedge for providing complete code this means alot to me but the code i am using is used with php so when i updated my jqyery with yours then due to ' this single inverted comma it php ended there and showed error – Anay Pareek Sep 09 '16 at 08:51
Try changing `$("
")` to `$("div")`. Jquery uses css selectors or complete element nodes. So, if you want to add to div element, just use div. Also, remove `.live` function in javascript. Just use `.on`. As you can see at http://api.jquery.com/live/ , live is deprecated since jquery 1.7 (you are using 1.8) – Palash Sep 09 '16 at 09:05

jquery live search not working

1 Answers1