Как жить поиск и поиск после клика с Ajax

Question

Я пытаюсь создать живой поиск с помощью Ajax, но я хочу, чтобы при нажатии на результат этого поиска он автоматически выполнял поиск.

мой HTML-код

<form id="search" action="">
    <input type="text" class="form-control" id="qu" placeholder="search" required>
    <div id="display" style="display: none"></div>
</form>

здесь мой ajax живой поиск

    function fill(Value) {
   $('#qu').val(Value);
   $('#display').hide();
}
$(document).ready(function() {
   $("#qu").keyup(function() {
       $('#display').show();
       var name = $('#qu').val();
       if (name == "") {
           $("#display").html("");
           $("#display").hide();
       }
       else {
           $.ajax({
               type: "POST",
               url: "cari.php",
               data: {
                   search: name

               },
               success: function(html) {
                   $("#display").html(html).show();

               }

           });

       }

   });

});

здесь мой поиск ajax

$(function() {
  $("#search").bind('submit',function() {
    $('#main_content').hide();
    var value2 = $('#qu').val();
     $.post('cari_user.php',{value2:value2}, function(data){
     $("#main_content").html(data);
     $('#main_content').fadeIn("slow");
     $("#search")[0].reset();
     });
     return false;
  });
});

в моем текущем коде после того, как я ввожу запрос в ввод в режиме реального времени поиска, мне нужно вручную нажать кнопку ввода / щелчка для ввода, чтобы выполнить поиск по запросу, полученному в результате поиска в режиме реального времени.

Я хочу, чтобы я щелкнул по результату поиска в реальном времени, после чего система автоматически выполнит поиск.

Answer 1

Я пишу код для вас .. попробуйте с этим

<form method="post" action="search.php">
 <input type="text" id="search-box" name="search" autocomplete="off" class="form-control search" placeholder="Enter product  / service to search">
 <input type="submit" value="search" name="submit" id="hrdSearch" class="s_button">
 <div id="suggesstion-box"></div>
</form>


<script>
$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
        type: "POST",
        url: "cari.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
        },
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#search-box").css("background","#FFF");
        }
        });
    });
    $("#hrdSearch").click(function (){
        var v = $("#search-box").val(); 
        window.location.href = "search.php?keyword=" + v;
        return false;
    });
});

function selectCountry(val) {

    $("#search-box").val(val);
    $("#suggesstion-box").hide();
}
</script>

cari.php

<?php
if(!empty($_POST["keyword"])) {


$query ="select * table_name where column_name like '". $_POST ["keyword"] ."%';";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="country-list">
<?php
foreach($result as $country) {
?>
<li onClick="selectCountry('<?php echo $country["name"]; ?>');"><?php echo $country["name"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>