如何使用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 } } ?>