pax.widget.inputbox

This is an auto-complete box

Author

Mikkel Bergmann, http://www.pointful.com

Note

This is yet to be re-written, to use the PAX widget library.

Summary

pax.widget.inputbox	This is an auto-complete box
Functions
pax.widget.inputbox.init	Initialises an input box for ajax input
pax.widget.inputbox.setSearchMode	Chooses which search mode to use, for an inputbox

Functions

pax.widget.inputbox.init

pax.widget.inputbox.init = function( displayField,
serverSearchScript,
valueField )

Initialises an input box for ajax input

Parameters

displayField	the field we display / edit the value in
serverSearchScript	The name of the script to call on the server
valueField	Optionally you can choose a seperate field to store the data in. By default this is the same as the displayField

Returns

nothing

Example

Input box example: start by typing 'la' in the box below:
<form name='inputBoxForm' onsubmit='return false;'>
    <span>
        <input name="town" id="town">
    </span>
</form>
This example uses a static php file, with a random selection of 300 Australian town names from NSW.
It will show an input box where you can quickly find town names, via three diffrent methods:
<ul>
    <li><b>Start match</b> - matches from the start of the value string</li>
    <li><b>Partial match</b> - matches anywhere within the value string</li>
    <li><b>Sounds like</b> - matches on complete values that sound like the string (using a soundex lookup)</li>
</ul>
Click on the icon at the end of the text box, to configure a different search method.
[:.
    pax.widget.inputbox.init( pax.$('town'), '/pax/documentation/pax.widget.inputbox.example.php' );
    exampleCleanup = function() {
        pax.widget.inputbox.hideMessageBox( 'town_icon' );
    };
:]

pax.widget.inputbox.setSearchMode

pax.widget.inputbox.setSearchMode = function( searchMode,
displayField )

Chooses which search mode to use, for an inputbox

Parameters

searchMode	which search mode to use
displayField	which field has the config, and is used for display

Returns

nothing

Example

Try typing 'Lake cat eye', and you should get 'Lake Cathie'. "Lake cat eye" is what the locals call it ;o)
<form name='inputBoxForm' onsubmit='return false;'>
    <span>
        <input name="pax.widget.inputbox.setSearchMode.town" id="pax.widget.inputbox.setSearchMode.town">
    </span>
</form>
[:.
    pax.widget.inputbox.init( pax.$('pax.widget.inputbox.setSearchMode.town'), '/pax/documentation/pax.widget.inputbox.example.php' );
    pax.widget.inputbox.setSearchMode( 'soundex', pax.$('pax.widget.inputbox.setSearchMode.town') );
    pax.widget.inputbox.showConfigIcon( 'pax.widget.inputbox.setSearchMode.town' );

    exampleCleanup = function() {
        pax.widget.inputbox.hideMessageBox( 'pax.widget.inputbox.setSearchMode.town_icon' );
    };
:]

This example is almost identical to the pax.widget.inputbox.init example, except it starts in ‘sounds like’ mode. You should note that we must use pax.widget.inputbox.showConfigIcon to update the config icon.