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

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

我要我单击实时搜索的结果，然后系统会自动进行搜索。

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 } } ?>

如何使用Ajax进行实时搜索和单击后搜索

1 个答案: