如何使用 Ajax 进行实时搜索和点击后搜索答案

【问题标题】：How to Live Search and Search After Click with Ajax如何使用 Ajax 进行实时搜索和点击后搜索
【发布时间】：2018-08-26 07:20:09
【问题描述】：

我尝试使用 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;
  });
});

在我在实时搜索输入中键入查询后，在我的当前代码中，然后我必须手动按 Enter/单击 Enter 按钮才能根据我从实时搜索中获得的查询进行搜索。

我想去我点击实时搜索的结果然后系统会自动进行搜索。

【问题讨论】：

标签： javascript php jquery ajax

【解决方案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 } } ?>

【讨论】：