Essayez Live Search

When I was growing up, my dad had the best job I could possibly imagine: he was an arcade game and pinball technician. For me, that meant summer trips through Poland’s coastal cities with their seasonal arcade parlors; peeking inside cabinets to learn programming and engineering secrets; and—of course—free games!

One of my favorites was PAC-MAN, whose popularity transcended the geopolitical barriers of that time. During the heyday of space shooters, Tōru Iwatani’s creation stood out as one of the first video games aimed at a broader audience, with a cute story of pizza-shaped character gobbling dots in a maze, colorful (literally!) characters, friendly design, very little violence and everlasting fun.

Today, on PAC-MAN’s 30th birthday, you can rediscover some of your 8-bit memories—or meet PAC-MAN for the first time—through our first-ever playable Google doodle. To play the game, go to google.com during the next 48 hours (because it’s too cool to keep for just one day) and either press the “Insert Coin” button or just wait for a few seconds.

Google doodler Ryan Germick and I made sure to include PAC-MAN’s original game logic, graphics and sounds, bring back ghosts’ individual personalities, and even recreate original bugs from this 1980’s masterpiece. We also added a little easter egg: if you throw in another coin, Ms. PAC-MAN joins the party and you can play together with someone else (PAC-MAN is controlled with arrow keys or by clicking on the maze, Ms. PAC-MAN using the WASD keys).

PAC-MAN™ & ©1980 NAMCO BANDAI Games Inc.


PAC-MAN seems like a natural fit for the Google homepage. They’re both deceptively straightforward, carefully hiding their complexity under the hood. There’s a light-hearted, human touch to both of them. And we can only hope you find using Google at least a quarter as enjoyable as eating dots and chasing ghosts. You know, without actually needing any quarters.

Posted by Marcin Wichary, senior UX designer and developer

PHP Example - AJAX Live Search

❮ PreviousNext ❯


AJAX can be used to create more user-friendly and interactive searches.


AJAX Live Search

The following example will demonstrate a live search, where you get search results while you type.

Live search has many benefits compared to traditional searching:

  • Results are shown as you type
  • Results narrow as you continue typing
  • If results become too narrow, remove characters to see a broader result

Search for a W3Schools page in the input field below:

The results in the example above are found in an XML file (links.xml). To make this example small and simple, only six results are available.


Example Explained - The HTML Page

When a user types a character in the input field above, the function "showResult()" is executed. The function is triggered by the "onkeyup" event:

<html>
<head>
<script>
function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

Source code explanation:

If the input field is empty (str.length==0), the function clears the content of the livesearch placeholder and exits the function.

If the input field is not empty, the showResult() function executes the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the input field)


The PHP File

The page on the server called by the JavaScript above is a PHP file called "livesearch.php".

The source code in "livesearch.php" searches an XML file for titles matching the search string and returns the result:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
  $hint="";
  for($i=0; $i<($x->length); $i++) {
    $y=$x->item($i)->getElementsByTagName('title');
    $z=$x->item($i)->getElementsByTagName('url');
    if ($y->item(0)->nodeType==1) {
      //find a link matching the search text
      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
        if ($hint=="") {
          $hint="<a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
          $hint=$hint . "<br /><a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>

If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

  • Load an XML file into a new XML DOM object
  • Loop through all <title> elements to find matches from the text sent from the JavaScript
  • Sets the correct url and title in the "$response" variable. If more than one match is found, all matches are added to the variable
  • If no matches are found, the $response variable is set to "no suggestion"

❮ PreviousNext ❯

0 Replies to “Essayez Live Search”

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *