ajax live search, go to other page, then display results

Question

so I have multiple web pages, all containing the same search form. Now I want to make it when the users starts typing, the page with the list of results loads, replacing the current page, and then query and show all the items found. How can I do this with ajax? when I go to the results page (another .php page), I can't really show the results.

so for example, I have on my index page this form:

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

and I have a page that lists the movies that are searched for on my films.php page:

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

thanks in advance

Answer 1

I suggest that you use an ajax query as you're typing and then display the results in a dedicated container on the current page. Then, when the user clicks "submit", he still gets to go to the results page.

Here's a code hint to show you the concept (it needs adaptation and improvement) :

First, you add an HTML placeholder on the current page :

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

Then you trigger the search every time you type a new letter in the input field (in your existing code).

The code in processingPage.php (it is a new file you may create) is roughly the same as you showed, except that you need to output the data : return or echo ...

Don't forget that your query string will be in the $_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);
         }
      });
   }
});

Hope this helped you and gave you a little heads-up about what to do. Of course, you can improve by putting conditions and timers on the typing so that the ajax request doesn't fire all the time, etc.