Wie man zwei Suchmaschinefunktionen kombiniert

Question

Ich habe eine Suchmaschine, die Live-Ergebnisse anzeigen, aber ich zweite Funktion mit ihm, die auf Klicken auf meine Absenden Schaltfläche Benutzer in Ergebnisseite umgeleitet wird. Es ist meine Live-Suche in Aktion (noch eine Demoversion) und es gibt Code für sie:

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

Dieser Code funktioniert prima, außer ich es brauchen auf Klick arbeiten „Enter“ Button (auf der Tastatur) oder Submit Button (wie ich bereits oben erwähnt habe) SO ist meine Frage: 1.Schreibe ich brandneue AJAX POST-Methode für meine Taste mit ID # Search-Taste. Wenn ich 2 Funktionen in einem verbinden muss kann jemand mir bitte Ratschläge geben, wie man die neue Funktion startet oder mir einen Link zum Thread gibt, der mir beim Schreiben der neuen Funktion helfen kann.

Sorry, wenn ich euch verwirrt habe, bin ich ziemlich verwirrt auch haha. VIELEN DANK !

Answer 1

Nein, Sie brauchen keine andere Funktion. Sie können den Mechanismus verwenden. Mehr unter https://stackoverflow.com/a/6960586/145878

Sie Ihren Code wie folgt aktualisieren:

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

Answer 2

ich Ihre Frage so verstanden: Sie eine Suchleiste möchten, dass zeigt einige Vorschläge an, die auf eingegebener Eingabe basieren, und eine Seite mit allen Ergebnissen, wenn auf die Schaltfläche Absenden geklickt wird.

Do it diese Weise:

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

Was es tut: es Sie zu einer anderen Seite nehmen, wenn Such-Schaltfläche geklickt wird ..Otherwise es Vorschläge in food_search_result div zeigen.

Sie können weiterhin Ihren Code mit JQuery für Vorschlag Teil vereinfachen wie folgt:

Dies hilft

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

Hoffnung!