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.inputboxThis is an auto-complete box
Functions
pax.widget.inputbox.initInitialises an input box for ajax input
pax.widget.inputbox.setSearchModeChooses 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

displayFieldthe field we display / edit the value in
serverSearchScriptThe name of the script to call on the server
valueFieldOptionally 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( $('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

searchModewhich search mode to use
displayFieldwhich 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.widget.inputbox.setSearchMode.town'), '/pax/documentation/pax.widget.inputbox.example.php' );
    pax.widget.inputbox.setSearchMode( 'soundex', $('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.

pax.widget.inputbox.init = function(displayField,
serverSearchScript,
valueField)
Initialises an input box for ajax input
pax.widget.inputbox.setSearchMode = function(searchMode,
displayField)
Chooses which search mode to use, for an inputbox
Close