如何使两个搜索引擎功能相结合

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

希望这有助于！