Javascript Widgets:liveSearch (javascript combobox)
From ReservesDirect: Open Source EReserves System
Home :: Features :: Screenshots :: Demo (http://www.reservesdirect.org/demo/index.html) :: Documentation :: Downloads :: Support :: Blog (http://www.reservesdirect.org/blog) :: Join Us!
ReservesDirect Documentation: Contents | Library staff handbook | System administrator handbook | Developer handbook
The liveSearch combo box is a marvelous UI feature utilizing [AJAX (http://en.wikipedia.org/wiki/AJAX)]. It allows the flexibility of a text box while still providing a controlled vocabulary. When the user begins typing in the standard HTML textbox an asynchronous call is made to the server returning suggested results into a space located below the textbox.
Adding this functionality to a page is simple.
- include the liveSearch.js file
<script language="JavaScript1.2" src="secure/javascript/liveSearch.js"></script>
- add the textbox and div tag to your page.
It is best but not necessary, to locate the textbox outside of any form tags. Using the RETURN key to select values returned will automatically submit the associated HTML form. This event is not trappable and results in unexpected behavior.
- locate the div tag on the page
- initalize the textbox as a liveSearch widget
<input type="text" size="55" id="search_inst" name="search_inst" onKeyPress="liveSearchStart(event, this, 'AJAX_functions.php?f=instList', document.getElementById('LSResult'), 'instSearchReturnAction');"> <div class="LSResult" id="LSResult" style="display: none;"><ul id="LSShadow"></ul></div> <script language="JavaScript">liveSearchInit(document.getElementById("search_inst"));</script>
The textbox will need an onKeyPress Handler calling liveSearchStart, this funcition is defined in the liveSearch.js
Parameter List:
- event - (reserved word) pointer to keyPress event
- this - (reserved word) pointer to textbox element
- url - URL of the server AJAX handler (the value entered by the user will be appended to this URL as qu=encode64(value))
- div_result - handle to the result frame (if multiple comboboxes appear on a single page each must have a unique result frame specified by id)
- callback function - javascript function executed when data is selected
