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 ) 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, 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.

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>
  </form>

  <script type="text/javascript">
     
    function updateSearchResult()
    {  
      new Ajax.Updater(
        'searchResult', 
        '<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 ); 

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


Back to BrushedTemplate

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-3) was last changed on 27-May-2006 17:38 by Dirk Frederickx