PHP Ajax Live Search Box Clickable - php

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