How to make two search engine functions combined

Question

I have a search engine which display live results,but i second function with it,which is on clicking on my submit button user to be redirected in result page. There is my live search in action(still a demo version) And There is code for it:

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

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

This code is working fine,except i need it to work on click "Enter" button(on keyboard) or submit button(as i already mentioned above)SO my question is: 1.Should i make brand new ajax POST method for my button with id #search-button. If i must connect 2 functions in one can somebody please give me advice on how to start the new function or give me a link to thread which can help me with writing the new function.

Sorry if i have confused you guys,i am pretty confused too haha . THANKS !

Answer 1

I understood your question this way: you want a search bar that shows some suggestions based on typed input, and a page with all results if Submit button is clicked.

Do it this way:

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

What it does it : it will take you to another page when Search button is clicked ..Otherwise it will show suggestions in food_search_result div.

You can further simplify your code using Jquery for suggestion part as follows:

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

Hope this Helps!

Answer 2

No you do not need another function. You can use form submit mechanism. See more at https://stackoverflow.com/a/6960586/145878

You can update your code following way:

Markup

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