[英]ajax live search, go to other page, then display results
所以我有多個網頁,所有網頁都包含相同的搜索表單。 現在,我想在用戶開始鍵入內容時進行加載,加載包含結果列表的頁面,替換當前頁面,然后查詢並顯示找到的所有項目。 我如何用ajax做到這一點? 當我轉到結果頁面(另一個.php頁面)時,我無法真正顯示結果。
因此,例如,我在索引頁面上有以下表格:
<form action='films.php' method='get' id='zoekform'>
<input id="ZoekBalkSearch" type="search" name="zoekparameter" placeholder="Geef een zoekterm in."/>
<input id="ZoekButton" type="submit" value="Zoek"/>
</form>
而且我有一個頁面,列出了在films.php頁面上搜索的電影:
//controlleer of er een zoekparameter meegegeven is
if(!isset($_GET['zoekparameter']))
{
//haal alle films op gesorteerd volgens naam indien er geen zoekparameter meegegeven is
$query=$connection->prepare("SELECT id,filmnaam,filmjaar,regisseur,acteurs,posterlink FROM films ORDER BY filmnaam;");
}
else if ($_GET['zoekparameter']!='')
{
//anders haal de zoekparameter op
$tezoeken=$_GET['zoekparameter'];
//controleer ook of er misschien naar een jaar gezocht is en sla deze variabele op in $jaar
$jaar=intval($tezoeken);
//voeg eventuele extra karakters toe aan de zoekquery
$tezoeken='%'.$tezoeken.'%';
//zoek in de database (gebruik ook bindparams als beveiliging tegen sql injection)
$query=$connection->prepare("SELECT id,filmnaam,filmjaar,regisseur,acteurs,posterlink FROM films WHERE filmnaam ILIKE :zoek OR regisseur ILIKE :zoek OR acteurs ILIKE :zoek OR filmjaar=:jaar ORDER BY filmnaam;");
$query->bindParam(':zoek',$tezoeken,PDO::PARAM_STR);
$query->bindParam(':jaar',$jaar,PDO::PARAM_INT);
}
$query->execute();
//geef alle gevonden films terug in de table
while($row=$query->fetch(PDO::FETCH_BOTH))
{
$id=$row[0];
$filmnaam=$row[1];
$filmjaar=$row[2];
$regisseur=$row[3];
$acteurs=$row[4];
$poster=$row[5];
echo "<tr><td><a href='moviePage.php?id=$id'><img class='miniposter' src='$poster' alt='De poster van de film'/></a></td><td><a href='moviePage.php?id=$id'><strong>$filmnaam</strong></a></td><td><a href='moviePage.php?id=$id'>$filmjaar</a></td><td><a href='moviePage.php?id=$id'>$regisseur</a></td><td><a href='moviePage.php?id=$id'>$acteurs</a></td></tr>";
}
?>
提前致謝
我建議您在鍵入時使用ajax查詢,然后將結果顯示在當前頁面上的專用容器中。 然后,當用戶單擊“提交”時,他仍然可以轉到結果頁面。
這是一個代碼提示,向您展示這個概念(它需要適應和改進):
首先,在當前頁面上添加HTML占位符:
<div id="resultPlaceHolder"></div>
然后,您每次在輸入字段(在現有代碼中)輸入一個新字母時觸發搜索。
processingPage.php中的代碼(您可能會創建一個新文件)與您顯示的代碼大致相同,不同之處在於您需要輸出數據:return或echo ...
不要忘記您的查詢字符串將在$_POST['queryString']
。
$("#ZoekBalkSearch").keyUp(function() {
$("#resultPlaceHolder").empty();
//No need to query over an empty query string
if ($("#ZoekBalkSearch").val() != "") {
$.ajax({
type: "POST",
url: "processingPage.php",
data: {
queryString: $("#ZoekBalkSearch").val()
},
success: function(data) {
//Parse data - if you chose JSON data response, for example
//Append the data in the placeHolder
$("#resultPlaceHolder").append(data);
}
});
}
});
希望這對您有所幫助,並給您一些有關如何做的提示。 當然,您可以通過在鍵入時加上條件和計時器來改進,以使ajax請求不會一直觸發,等等。
如果您有數據庫,則可以使用jquery在與google類似的頁面中顯示結果。
您可以使用Ajax,PHP和JQuery執行以下操作。 希望這對您有所幫助或有所幫助。
在此處查看實時演示和源代碼。
http://purpledesign.in/blog/to-create-a-live-search-like-google/
創建一個搜索框,可能是這樣的輸入字段。
<input type="text" id="search" autocomplete="off">
現在,我們需要聽用戶在文本區域上鍵入的內容。 為此,我們將使用jquery live()和keyup事件。 在每個鍵盤上,我們都有一個jquery函數“ search”,它將運行一個php腳本。
假設我們有這樣的html。 我們有一個輸入字段和一個列表以顯示結果。
<div class="icon"></div>
<input type="text" id="search" autocomplete="off">
<ul id="results"></ul>
我們有一個Jquery腳本,它將監聽輸入字段上的keyup事件,如果不為空,它將調用search()函數。 search()函數將運行php腳本,並使用AJAX在同一頁面上顯示結果。
這是JQuery。
$(document).ready(function() {
// Icon Click Focus
$('div.icon').click(function(){
$('input#search').focus();
});
//Listen for the event
$("input#search").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search_st.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html);
}
});
}return false;
}
});
在php中,向MySQL數據庫查詢查詢。 php將返回將使用AJAX放入html中的結果。 這里將結果放入html列表中。
假設有一個虛擬數據庫,其中包含兩個表動物和鳥,具有兩個相似的列名“ type”和“ desc”。
//search.php
// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";
// Connection
global $tutorial_db;
$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");
// Check Connection
if ($tutorial_db->connect_errno) {
printf("Connect failed: %s\n", $tutorial_db->connect_error);
exit();
$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</li>';
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);
// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
// Build Query
$query = "SELECT *
FROM animals
WHERE type LIKE '%".$search_string."%'
UNION ALL SELECT *
FROM birf
WHERE type LIKE '%".$search_string."%'"
;
$result = $tutorial_db->query($query);
while($results = $result->fetch_array()) {
$result_array[] = $results;
}
// Check If We Have Results
if (isset($result_array)) {
foreach ($result_array as $result) {
// Format Output Strings And Hightlight Matches
$display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
$display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
$display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';
// Insert Name
$output = str_replace('nameString', $display_name, $html);
// Insert Description
$output = str_replace('functionString', $display_function, $output);
// Insert URL
$output = str_replace('urlString', $display_url, $output);
// Output
echo($output);
}
}else{
// Format No Results Output
$output = str_replace('urlString', 'javascript:void(0);', $html);
$output = str_replace('nameString', '<b>No Results Found.</b>', $output);
$output = str_replace('functionString', 'Sorry :(', $output);
// Output
echo($output);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.