FWC:SmartSelect @ FlyWeb :Components

The main difference of combobox component from the select component is an ability of editing the title field by the user and "autocompletion" of suitable items. Autocompletion consists in display of the truncated set of items of the dropping out list which first symbols coincide with entered by the user in the title field. You can find examples at any demo-page.

With SmartSelect toolkit you can create three types of component which works differently with autocompletion - the mode attribute can be set to three values: combo, select and text.

These methods create components of three different types:

document.write(FWC.newSmartSelect('[["Red"],["Orange"],["Yellow"],["Green"],["Blue"],["Violet"]]','{"id":"comp1","title":"color...","mode":"combo"}'));
document.write(FWC.newSmartSelect('[["Red"],["Orange"],["Yellow"],["Green"],["Blue"],["Violet"]]','{"id":"comp2","title":"color...","mode":"select"}'));
document.write(FWC.newSmartSelect('[["Red"],["Orange"],["Yellow"],["Green"],["Blue"],["Violet"]]','{"id":"comp3","title":"color...","mode":"text"}'));

Here is result of their work:

There is direct evidence of work.

You can turn off or recustomize events handler of autocompletion by ontype attribute. Just set attribute to ontype="return false;" to turn off autocomplete.

Using this attribute it is possible to achieve one more indispensable effect - substitution of items not from the list, but loading them directly from an external source. In the next example we will create SmartSelect mode:text component which will address to MySQL database contains 6000 functions of PHP scripting language, while user typing. For this we need to make the following:
1) apply loadOptions_PHP() method call with necessary parameters to the ontype attribute;
2) disable standart autocomplete by adding return false;, because we need while data transfers from the server, shouldn't we? ;)
3) transfer value 'autofill' as a callback-parameter to this function, this needs to call standart event handler only after the loading termination;
4) set the fillstart attribute to define minimum number of symbols which user should enter before autocompletion start works, e.g. 2 symbols.

Here is example:

enter first two letters of function name..

As you can see there is nothing complicated :) There is source codes: xml - file with listbox definition, css - user defined stylesheet, php - MySQL to JSON converter.