So what does this component do?
Here is the first examlpe:
list of emails is being autocompleted in a simple input
<input class="dropdown" autocomplete="off" id="inputer2" style="width: 250px;" <span class="hilite">acdropdown="true" autocomplete_list="array:emails" autocomplete_list_sort="true" autocomplete_matchsubstring="true"</span>>
Or this examlpe with lots more details:
In this example the typed text will be searched for anywhere in the strings in the list
<input class="dropdown" autocomplete="off" id="inputer2" style="width: 250px;" acdropdown="true" autocomplete_list="array:emails" autocomplete_list_sort="true" autocomplete_matchsubstring="true">
available autocomplete (depending on your selection):
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
or days
'Monday', 'Tuesday', 'Wendsday', 'Thursday', 'Fryday', 'Saturday', 'Sunday'
code
<input class="dropdown" autocomplete="off" id="inputer4" style="width: 250px;" acdropdown="true" autocomplete_list="array:months"> <br/> <input value="set to days" onclick="document.getElementById('inputer4').hAutocomplete.setListArray( days ); document.getElementById('inputer4').focus()" type="button"> <br/> <input value="set to months" onclick="document.getElementById('inputer4').hAutocomplete.setListArray( 'months' );" type="button">
Countries with custom formatting function:
code
<input class="dropdown" autocomplete="off" style="width: 250px;" acdropdown="true" autocomplete_list="array:aCountries" autocomplete_format="formatCountries" autocomplete_complete="true">
...or you can turn a regular select with countries list to an autocompleted one:
code
<select acdropdown=true name=country> <option value="af" >Afghanistan ... </select>
Gmail like autocomplete. You can separate the items by comma. The option autocomplete_forcecorrect="true" is used so if a text typed does not match any item the last typed characters (those which after adding them the list with suggestions was empty) are marked
code
<textarea class="dropdown" cols="70" autocomplete="off" acdropdown="true" autocomplete_list="array:emails" autocomplete_complete="true" autocomplete_matchsubstring="true" autocomplete_forcecorrect="true"></textarea>
And finally the remote loading functionality. The data is loaded from a url (the attribute autocomplete_list="url:") ). The list returned is just a list of items separated by pipe - item1|item2|item3. In this example the url is get.php?s=[S]&l=10. The [S] will be replaced with the actual control value before submitting. The other option ( l=10 ) is an option to tell the script (get.php) to limit the result to only ten suggestions.
code
<input class="" id="autocomplete_remote" acdropdown="true" autocomplete_list="url:get.php?s=[S]&l=10" tabindex="2" name="testURL">