O'Reilly logo

Ajax: The Definitive Guide by Anthony T. Holdener III

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Dynamic Searching with Ajax

Now it is time to take searching to the next level—the Web 2.0 level. By using Ajax, you can make searching a more interactive user experience. I will show you how to use Ajax to hint at possible search topics as the user is typing, a concept that was first made popular in the Google Suggest application. It is also important to handle search results correctly when displaying them to the user. You can place search results as the main content of the page, but having them displayed off to the side somewhere could also be useful.

Giving Hints

One of the first uses of Ajax was to dynamically give and modify suggestions to the user as she typed characters into a search box. This was accomplished through multiple, almost instantaneous calls to the server as the input value from the user changed. Before getting into the Ajax end of this, however, let's build the JavaScript to trap the inputs from the user.

We need to trap the onkeyup event, which, if you remember from Chapter 5, Internet Explorer handles differently than all other Document Object Model (DOM)-compliant browsers do. For this reason, it is easier to use Prototype's event handling to trap the events. Consider the following XHTML snippet:

1 <form id="myForm" method="post" action="self"> 2 <div> 3 <input id="searchBox" name="searchBox" type="text" size="15" value="" /> 4 &nbsp; 5 <input type="submit" onclick="return submitForm( );" /> 6 </div> 7 <div id="myHints"></div> 8 </form> 9 <div id="myResults"></div> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required