ajax實時搜索，轉到其他頁面，然後顯示結果

所以我有多個網頁，都包含相同的搜索表單。現在我想在用戶開始輸入時加載該頁面，加載結果列表的頁面將替換當前頁面，然後查詢並顯示找到的所有項目。我怎樣才能做到這一點與Ajax？當我轉到結果頁面（另一個.php頁面）時，我無法真正顯示結果。ajax實時搜索，轉到其他頁面，然後顯示結果

因此，例如，我有我的索引頁上的這種形式：

<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>"; 
      } 
      ?>

在此先感謝

來源

2013-07-24 Cédric Vandelaer

我建議您在輸入時使用ajax查詢，然後將結果顯示在當前頁面上的專用容器中。然後，當用戶點擊「提交」時，他仍然會轉到結果頁面。

這裏的代碼提示向您展示的概念（它需要調整和改進的）：

首先，在當前頁面上添加一個HTML佔位符：

<div id="resultPlaceHolder"></div>

然後你觸發搜索每在輸入字段中鍵入一個新字母（在現有的代碼中）。

在processingPage.php（這是你可以創建一個新的文件）是大致相同的，你表明，除了你需要輸出數據的代碼：返回或回聲......

不要忘記你的查詢字符串將在$_POST['queryString'] var。

$("#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請求不會一直觸發等。

來源

2013-07-25 12:53:26 Lapidouce

如果你有一個數據庫，那麼你可以使用jquery使結果顯示在相同的像谷歌的網頁。

下面是你可以用Ajax，PHP和JQuery做的事情。希望這有助於你，或給你一個開始。

在這裏看到現場演示和源代碼。

http://purpledesign.in/blog/to-create-a-live-search-like-google/

創建一個搜索框，可能是這樣的輸入字段。

<input type="text" id="search" autocomplete="off">

現在我們需要聽取文本區域中的用戶類型。爲此，我們將使用jquery live（）和keyup事件。在每個keyup上，我們都有一個可以運行php腳本的jquery函數「search」。

假設我們有這樣的html。我們有一個輸入欄和一個列表來顯示結果。

<div class="icon"></div> 
<input type="text" id="search" autocomplete="off"> 
<ul id="results"></ul>

我們有一個jquery腳本，將聽取輸入字段中keyup事件，如果它不是空的它會調用搜索（）函數。 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); 
     } 
    }

來源

2014-01-17 20:41:49

ajax實時搜索，轉到其他頁面，然後顯示結果

回答

相關問題