PHP Ajax Live Search Box Clickable

Question

I am trying to make a live search using ajax. The search is working fine but i want it to be clickable. This is the code

 <div class="box-body">   
  <h2>Search Database</h2>
  <input class="form-control" type="text" name="search" id="search" placeholder="search our inventory">
  <br>
  <br>
  <h2 class="bg-success" id="result">
  </h2>

 <script type="text/javascript">
     $('#search').keyup(function(){         
        var search = $('#search').val();  
        $.ajax({        
          url:'searchproditem.php',
          data:{search:search},
          type: 'POST',
          success:function(data){        
             if(!data.error) {            
              $('#result').html(data);
              $('#result li').click(function(){
                  var res_value = $(this).text();
                  $('#search').attr('value', res_value);
              });
            }
         }        
      });
     });
</script>


<?php

include 'db/db.php';
$search = $_POST['search'];
if (!empty($search)) {  
    $res = $con->prep("SELECT * FROM items WHERE itemname LIKE :search ");

    $res->bindValue(':search', "$search%");
    $res->execute();
    $count = $res->rowCount();
  if (!$res) {      
    die('QUERY FAILED');
  }
  if ($count <= 0) {
    echo "Sorry We dont have that item in stock";
  }else{        
   while ($r = $res->fetch(PDO::FETCH_ASSOC)) {     
    $brand = $r['itemname'];
?>

    <ul class="list-unstyled">          
    <?php
      echo "<li>{$brand} in stock</li>";
    ?>
    </ul>
<?php 
   }
  }
}
?>

Answer 1

Try this for click function. To bind events with dynamically generated events, we can use following approach.

$('#result').on('click', 'li', function(){
              var res_value = $(this).text();
              $('#search').attr('value', res_value);
          });