ajax实时搜索，转到其他页面，然后显示结果答案

【问题标题】：ajax live search, go to other page, then display resultsajax实时搜索，转到其他页面，然后显示结果
【发布时间】：2013-07-24 20:54:13
【问题描述】：

所以我有多个网页，都包含相同的搜索表单。现在我想在用户开始输入时，加载带有结果列表的页面，替换当前页面，然后查询并显示找到的所有项目。我怎么能用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>

我有一个页面列出了在我的 movies.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>";
            }
            ?>

提前致谢

【问题讨论】：

标签： php ajax search live

【解决方案1】：

我建议您在键入时使用 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 请求就不会一直触发，等等。

【讨论】：

【解决方案2】：

如果您有数据库，那么您可以使用 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 事件。在每个 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);
        }
    }

【讨论】：