Wrox Home  
Search
Professional Ajax
by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett
March 2007, Paperback


Implementing the Web Search Widget

Implementing this widget is simple. First, you must upload the websearch.php file to your web server (of course, PHP must be installed, too). Next, you need an HTML document to reference all the components. The msnWebSearch object relies on the XParser class, which in turn depends on the zXml library (available at www.nczonline.net/downloads/). You must reference these files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en"  xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax WebSearch</title>
    <link rel="stylesheet" type="text/css" href="css/websearch.css" />
    <script type="text/javascript" src="js/zxml.js"></script>
    <script type="text/javascript" src="js/xparser.js"></script>
    <script type="text/javascript" src="js/websearch.js"></script>
</head><body>
</body>
</html>

To perform a search, set the msnWebSearch.search() method as the element's onclick handler:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en"  xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax WebSearch</title>
    <link rel="stylesheet" type="text/css" href="css/websearch.css" />
    <script type="text/javascript" src="js/zxml.js"></script>
    <script type="text/javascript" src="js/xparser.js"></script>
    <script type="text/javascript" src="js/websearch.js"></script>
</head><body>    
 <a href="#" onclick='msnWebSearch.search(event,"\"Professional Ajax\""); 
 return false;'>Search for "Professional Ajax"</a>
 <br /><br /><br /><br />
 <a href="#" onclick='msnWebSearch.search(event,"Professional Ajax"); 
 return false;'>Search for Professional Ajax</a>
</body>
</html>

The first new link performs a search for the exact phrase Professional Ajax, whereas the second searches for all the words. Also note the return false in the onclick event. Once again, this forces the browser to ignore the href attribute and is required. Clicking these links will draw the search box at the mouse's cursor, and you'll have the search results just pixels away.

This article is adapted from Professional Ajax by Nicholas C. Zakas, Jeremy McPeak, and Joe Fawcett (Wrox, 2006, ISBN: 0-471-77778-1), from chapter 8 "Web Site Widgets," written by Jeremy McPeak. Jeremy works in the IT department of a school district and has experience developing web solutions with JavaScript, PHP, and C#. Some other recent excerpts from Professional Ajax at Wrox.com are XMLHttp Requests for Ajax and Ajax Submission Throttling. Additionally, co-author Nicholas Zakas also recently wrote two original related articles: Ajax and the Yahoo! Connection Manager and Introduction to the Google Maps API for Wrox.com.