John the Developer

One of the most impressive ways to present content heavy site searches I’ve seen on the web is using dynamic search boxes that suggest results to you before you’ve even finished typing your search phrase, and it’s not a massive job to implement.   There are just 3 elements you need to consider:

• The HTML, this is the initial page that will contain the form itself and load the required CSS & Javascript
• The CSS, the styling elements that will hide the result parts when not in use
• The JavaScript, this will decide when top check for relevant results and return them when required
• The Server Side Script, this is the part that will check your database, text file or web service to find the information the user is looking for.

NOTE: The final server side element can be written for any language you choose, but in this case were going down the PHP route.

So the first thing you need to do is put the form element we’re going to base things around  into your page. In the real world this is more than likely going to be nested in a header or sidebar, but to keep things simple here are the no-frills raw elements.

<form action="/search.php" method="post">
  <input id="search" name="search" type="text" />
  <div id="quick-search"></div>
</form>

As you can see we’ve got the form pointing to an existing search page somewhere, the input box for the user to type the search term into and the empty DIV that will eventually contain our quick search results. In the real world you would probably have a submit button in the form as well but as we’re not going to use it here I’ve left it out.

The next task is a little basic CSS. you can go as fancy as you want with this but for the benefit of this example there’s simply a couple of lines to match the width of the text box and the quick search DIV. On page load there will not be any results to show either so we’ve hidden this as well.

<style type="text/css">
  input#search { width:300px;}
  div#quick-search{ width:300px; display:none; border:1px solid #efefef;}
</style>

so now we have a working form, time to add some javascript… Depending on taste you can either include the javascript directly in the page using script tags, or link it to the javascript file separately. You may also choose to use a local copy of jQuery rather than the Google Code example provided.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
  $("input#search").keyup(function(){
    if(this.value.length<3){
      $("div#quick-search").slideUp(200,function(){
        return false;
      });
    }else{
      $.ajax({
        type: "GET",
        url: "quicksearch.php?search="+this.value
        dataType: "json",
        success: function(data){
          // no results, best hide the quicksearch DIV...
          if(data.length<1){
            $("div#quick-search").slideUp(200);
          }else{
            // we've got results, so show them...
            var strOutputHTML = '<ul>';
            for(intCounter = 0; intCounter < data.length; intCounter++){
              strOutputHTML += '<li><a href="' + data[intCounter].href + '">'
                            + data[intCounter].title + '</a></li>';
            }
            strOutputHTML += '</ul>';
            $("div#quick-search").html(strOutputHTML);
            $("div#quick-search").slideDown(200);
          }
        }
      });
    }
  });
});
</script>

So now we have an html form, with a hidden results DIV underneath. The form now requests results from quickseasrch.php whenever you change the contents of the search box and there are more than 3 characters present. Now we need to return some results for the form to display.

In the real world you are most likely going to return meaningful results from a database/file search, but in this case we’re only interested in the method, so were going to return a spoof result array in the correct format using php.

/*
here's where you would do your database search, in this case we're just
going to check that the request is not empty, then return a test result.
*/

$arrResults = array();
if(!empty($_GET['search'])){
  $arrResults[] = array(
    'href'=>'http://www.php.net',
    'title'=>'PHP Homepage'
  );
  $arrResults[] = array(
    'href'=>'http://www.johnthedeveloper.co.uk',
    'title'=>'John The Developer - Homepage'
  );
}

/*
JSON encoded results are required in the javascript so PHP 5.1+ required here although
you could easily build this as a string manually if required.
*/

echo json_encode($arrResults);
exit;

And that’s it, just update the PHP to return meaningful results from your database or file system and job done,  and here’s to working example as well.