!! AJAX driven Find Page 

Tired of pressing the ''submit'' button everytime you enter a new search query ? 
Wanne a see direct response as soon as you entered your (partial) queries in the JSPWiki FindPage?

The [BrushedTemplate] now uses 
AJAX ( [Asynchronous Javascript and XML|http://www.adaptivepath.com/publications/essays/archives/000385.php] )
technology to dynamically update the ~SearchResults of the ~FindPage, without reloading the page.
As soon as you enter your text, the JSPWiki database is queried and the results are immediately displayed
in your browser. Due to the Lucene-engine, the search server-round-trip is pretty fast !

The new FindPage looks very similar: it's only lacking the ''submit'' button ;-)

--[DF|DirkFrederickx], April 06

* The direct search facility is now build straight into the Search-menu, at the top of the screen.
* There is an additional checkbox to get more details (context info) of the search results. (need JSPWiki v2.4.2 or later)
* FFS: Allow to exclude searches on attachements (looks more like a feature request)

! Implementation

The implementation is amazingly simple, as it is based on the excellent [prototype javascript library|http://prototype.conio.net].

The ~FindContent.jsp now only contains the AJAX code to asynchronously call the new ''~FindAJAX.jsp'' which does the actual work. It observes the search input field in intervals of 1 second.
As soon as the search input field changes, a server request to ~FindAJAX.jsp is fired automatically 
and the page is dynamically updated with the results.

The ~FindAJAX.jsp does the actual search. Most of the JSP code here is just a copy from 
the top-level Search.jsp and ~FindContent.jsp pages: 
it performs the actually query, and formats the results in a proper HTML table. 
The results are given back to the caller, as if there was no AJAX stuff involved.

Here is the actual AJAX code in the ~FindContent.jsp.\\
The function ''updateSearchResult()'' contains the asynchronous call to the ~FindAjax.jsp.
The Ajax.Updater actually updates the <div id='searchResult'> with the info coming back from the server. \\
This function is used to retrieve the results as soon as the page gets loaded: {{Event.observe(window, "load", ...);}}
or when the input field changes : {{Form.Element.Observer( ... );}}. Easy he ;-) 
  <form action="<wiki:Link format='url' jsp='Search.jsp'/>"
          name="searchForm2" id="searchForm2" 
accept-charset="<wiki:ContentEncoding />">
  <p><label for="query">Enter your query here: </label></p>
  <p><input type="text"   name="query" id="query" value="<%=query%>" size="40" /></p>

  <script type="text/javascript">
    function updateSearchResult()
      new Ajax.Updater(
        '<wiki:Link format="url" templatefile="FindAjax.jsp"/>',
          asynchronous: true,
          parameters: Form.serialize( 'searchForm2' ),
          onComplete: GraphBar.onPageLoad 
        } ); 

    Event.observe( window, "load", updateSearchResult, false );
    new Form.Element.Observer( "query", 1, updateSearchResult ); 

   <div id="searchResult" ></div>

Back to [BrushedTemplate]