The "Add Google AJAX Search" series continues!  If you've implemented the AJAX search you probably have noticed that pressing the ENTER key will actually clear the results.  Huh?  Sure, Google AJAX doesn't need a button or ENTER keypress to perform a search, but clearing the results upon ENTER is downright confusing since people tend to hit ENTER automatically after typing in a search term.  We're going to extend our basic Google AJAX example and stop that ENTER key from clearing the search results...


ENTER to Clear (?!?)
To be perfectly clear about the issue we're trying to fix:  Google's AJAX search automatically begins searching and returning results as soon as you type in characters (try it in our Google AJAX search box on this page).  With AJAX search you do not need to use the ENTER key to submit seach terms.

Unfortunately, pressing the ENTER key results in refreshing the page which, in turn, erases the search results!  That's certainly NOT what our users would expect the ENTER key to do!  We need to stop the ENTER key from refreshing the page.


OnKeyPress to the Rescue!
Our simple solution has three steps: (1) intercept each search box keystroke, (2) check to see if keystroke is the ENTER key, (3) pass keystroke to Google search if it was not the ENTER key.

The first step is to capture keystrokes before they're sent to Google.  We do this by adding our own OnKeyPress event handler to the search input box.  Using the input tag from part 1:

  < input id="gss_input" size="10" type="text" / >

Change the tag by adding an OnKeyPress handler to get the following:

  < input id="gss_input" size="10" type="text" onkeypress="return checkKeypress(event)" / >

Our handler calls a function "checkKeypress" whenever any key is pressed while focus is on the search input box.  So what does "checkKeypress" do?  Nothing, yet -- we need to add it!  What it WILL do is allow any non-ENTER keystrokes to pass through as normal while blocking ENTER keystrokes from causing postbacks and refreshing the webpage.

Again, building upon what we've already done in Part 1:  In your SCRIPT section, add the following prior to the OnLoad function:

  function checkKeypress(e)
   {  var kC  = (window.event) ? event.keyCode : e.keyCode;  // MSIE : Firefox
      var Esc = (window.event) ? 27 : e.DOM_VK_ESCAPE;         // MSIE : Firefox
      if (kC == Esc) {  event.keyCode=13;  return;  }    // if ESCAPE then clear results
      if (kC == 13) return false;   // if ENTER then ignore
      return kC;   // else is regular keypress so return the keycode
   }

Block the ENTER key; Use ESCAPE to Clear
If you're paying close attention to the code you'll notice we're doing more than just stopping the ENTER key from clearing our search results.  We're also doing something with the ESCAPE key.  In fact, we're forcing the ESCAPE key to act as the ENTER key (refreshing the page thereby erasing the search results).  Using the ESCAPE key is a bit more intuitive for clearing results than using the ENTER key.  (If you'd prefer to leave ESCAPE alone simply leave out the 3rd and 4th lines of the 'checkKeypress' function.)

We use variables 'kC' and 'Esc' to help identify keycodes across different browsers.  As usual, IE handles things differently than most other browsers.  The 'window.event' lines compensate for this and allows our 'checkKeypress' function to run smoothly across different browsers.


There you have it:  a super-simple function to stop ENTER from clearing our Google AJAX Search results.  You can add to the 'checkKeypress' function to further enhance your search.  For instance, to enhance search performance you could prevent any keystroke from passing through to Google until a minimum number of search characters have been entered.  Or you could check search terms against a list of "bad words" and not allow those terms to be completed / searched.