如何使兩個搜索引擎功能相結合

Question

我有一個搜索引擎顯示實時結果，但我第二個功能，它是點擊我的提交按鈕用戶在結果頁面重定向。 還有就是在行動我的生活搜索（仍然是一個演示版）​​ 並沒有爲它的代碼：

jQuery(document).ready(function ($) { 
 
\t $("#food_search").keyup(function(event){ 
 
\t \t var search_term =$(this).val(); 
 
$.ajax({ 
 
\t type:"POST", 
 
\t url:"http://page.com/bg/%D1%82%D1%8A%D1%80%D1%81%D0%B5%D0%BD%D0%B5-%D0%BD%D0%B0-%D1%85%D1%80%D0%B0%D0%BD%D0%B8/", 
 
\t data:{'fsearch':search_term}, 
 
\t success:function(res){ 
 
\t \t $("#food_search_result").html(res); 
 
\t \t console.log(res); 
 
\t }, 
 
\t error: function (xhr, ajaxOptions, thrownError) { 
 
      alert(xhr.status); 
 
      alert(xhr.responseText); 
 
      alert(thrownError); 
 
     } 
 
    }); 
 
\t }); 
 
});

<!---------------------------------------------------------------- 
 
          HTML 
 
-----------------------------------------------------------------> 
 
<form method="post" accept-charset="utf-8"> 
 
<input type="text" name="fsearch" id="food_search"> 
 
<button id="search-button" type="submit"><i id="button-icon"></i><span id="button-text">Търсене..</span></button> 
 

 
</form> 
 
<div id="food_search_result"> 
 
<?php 
 

 
If(isset($_POST['fsearch'])){ 
 
var_dump($_POST['fsearch']); 
 
} 
 
// printing the results here in my div(for live search) 
 
?> 
 
</div> 
 

 
<!---------------------------------------------------------------- 
 
           PHP 
 
-----------------------------------------------------------------> 
 
<?php /*Template Name:Food-Search.php*/ ?> 
 
<?php 
 
$hostname = "localhost"; 
 
$username = "name"; 
 
$password = "password"; 
 
$databaseName = "DB NAME !"; 
 
$connect = new mysqli($hostname, $username, $password, $databaseName); 
 
$connect->set_charset("utf8"); 
 
$fsearch= ""; 
 

 
if(!empty($_POST['fsearch'])) { 
 
$fsearch =$_POST['fsearch']; 
 

 
$req = $connect->prepare("SELECT title FROM food_data_bg WHERE title LIKE ?"); 
 
$value = '%'.$fsearch.'%'; 
 
$req->bind_param('s', $value); 
 
$req->execute(); 
 
$req->store_result(); 
 
$num_of_rows = $req->num_rows; 
 
$req->bind_result($title); 
 
if ($req->num_rows == 0){ 
 

 
echo 'Няма резултати'; 
 
} 
 
else{ 
 
while($data=$req->fetch()){ 
 
    ?> 
 
     <div class="search-result"> 
 
      <span class="result-title"><?php echo $title; ?></span> 
 
     </div> 
 
     <?php 
 
     } 
 
var_dump($_POST['fsearch']); 
 
$req->free_result(); 
 
    } 
 
}

此代碼工作正常，但我需要它的點擊運行「中輸入」按鈕（在鍵盤上）或提交按鈕（因爲我已經在上面提到過）所以我的問題是： 1.我應該爲我的按鈕使用ID＃search-button製作全新的ajax POST方法。 如果我必須將2個函數連接起來，請給我一些關於如何啓動這個新函數的建議，或者給我一個可以幫助我編寫新函數的線程的鏈接。

對不起，如果我混淆了你們，我很困惑太哈哈。謝謝 ！

Answer 1

不，你不需要另一個功能。您可以使用form submit機制。多見於https://stackoverflow.com/a/6960586/145878

您可以更新您的代碼如下方式：

標記

<form id="search_form" method="post" accept-charset="utf-8"> 

的Javascript

jQuery(document).ready(function ($) { 
    $("#search_form").submit(function(event){ 
     var search_term =$("#food_search").val(); 
     $.ajax({ 
      type:"POST", 
      url:"http://page.com/bg/%D1%82%D1%8A%D1%80%D1%81%D0%B5%D0%BD%D0%B5-%D0%BD%D0%B0-%D1%85%D1%80%D0%B0%D0%BD%D0%B8/", 
      data:{'fsearch':search_term}, 
      success:function(res){ 
       $("#food_search_result").html(res); 
       console.log(res); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
        alert(xhr.status); 
        alert(xhr.responseText); 
        alert(thrownError); 
       } 
      }); 
    }); 
}); 

Answer 2

我明白你的問題是這樣的： 你想有一個搜索欄根據鍵入的輸入顯示一些建議， 以及如果點擊提交按鈕則顯示所有結果的頁面。

這樣來做：

<form method="post" action="Food-Search.php" method="post" accept-charset="utf-8"> 
<input type="text" name="fsearch" id="food_search"> 
<input type="submit" value="Search"/> 
</form> 
<div id="food_search_result"> 

它做的事情：當點擊搜索按鈕..Otherwise它會顯示在food_search_result DIV建議它會帶你到另一個網頁。

您可以使用jQuery的建議，部分內容如下進一步簡化代碼：

$(document).ready(function(){ 
    $("#food_search").keyup(function(){ 
     var search_term = $("input").val(); 
     $.post("demo_ajax_gethint.asp", {fserarch: search_term}, function(result){ 
      $("#food_search_result").html(result); 
     }); 
    }); 
}); 

希望這有助於！