2つの検索エンジン機能を組み合わせる方法

Question

ライブ結果を表示する検索エンジンを持っていますが、2番目の機能があります。これは、送信ボタンをクリックして結果ページにリダイレクトされます。 アクションで私のライブサーチ（まだデモ版）が​​ があり、そのためのコードがあります：

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

に私はこの方法であなたの質問を理解： あなたがその検索バーをしたいですSubmitボタンをクリックすると、入力された入力に基づいた提案（ ）とすべての結果を含むページが表示されます。

は、このようにそれを実行します。

<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"> 

それはそれはどのような：それはfood_search_resultのdivでの提案が表示されます..Otherwise検索ボタンをクリックしたときに、それは別のページに移動します。

次のようにして、さらに提案部分についての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); 
     }); 
    }); 
}); 

はこの支援を期待！