PHP Ajaxライブ検索ボックスClickable

Question

私はajaxを使用してライブ検索をしようとしています。検索は正常に動作していますが、クリック可能にしたいと考えています。これはコードです

<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

クリック機能を試してみてください。動的に生成されたイベントとイベントをバインドするには、次の方法を使用できます。

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