Question

我有一个显示实时结果的搜索引擎，但我的第二个功能是它，点击我的提交按钮用户在结果页面中重定向。有我的实时搜索（仍然是演示版）并且有代码：

＆＃13;

jQuery(document).ready(function ($) {
	$("#food_search").keyup(function(event){
		var search_term =$(this).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);
       }
   });
	});
});

＆＃13;

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

＆＃13;

＆＃13; 这段代码工作正常，除了我需要它才能点击＆＃34;输入＆＃34;按钮（在键盘上）或提交按钮（如上所述）所以我的问题是： 1.我应该使用id＃search-button为我的按钮制作全新的ajax POST方法。如果我必须将2个函数连接到一个可以有人请给我关于如何启动新函数的建议或给我一个链接到线程，这可以帮助我编写新函数。

对不起，如果我让你们困惑，我也很困惑哈哈。谢谢！

Answer 1

我这样理解你的问题：你想要一个搜索栏，根据输入的输入显示一些建议，如果单击“提交”按钮，则显示包含所有结果的页面。

这样做：

<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中显示建议。

您可以使用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);
        });
    });
});

希望这有帮助！

Answer 2

不，你不需要其他功能。您可以使用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);
               }
           });
    });
});

如何组合两个搜索引擎功能

2 个答案: