3rd party script for managing autocomplete functionality.
| Author | Harald Kirschner <mail [at] digitarald.de> |
| Refactored by | Aaron Newton <aaron [dot] newton [at] cnet [dot] com> |
| License | MIT-style license |
| Version | 1.0rc3 |
| Source | http://digitarald.de/project/autocompleter/ |
| Mootools 1.1 | <Class.Extras>, <Element.Event>, <Element.Selectors>, <Element.Form>, <Element.Dimensions>, Fx.Style, Ajax, Json |
| Autocompleter | Observer.js |
| Autocompleter.js | 3rd party script for managing autocomplete functionality. |
| Autocompleter | All functions are part of the Autocompleter namespace. |
| Autocompleter.Base | Base class for the Autocompleter classes. |
| Properties | |
| build | Builds the html structure for choices and appends the events to the element. |
| getQueryValue | Returns the user’s input to use to match against the full list. |
| destroy | Remove the autocomplete functionality from the input. |
| hideChoices | Hides the choices from the user. |
| showChoices | Shows the choices to the user. |
| markQueryValue | Marks the queried word in the given string with <span class=”autocompleter-queried”>*</span> Call this i.e. |
| addChoiceEvents | Appends the needed event handlers for a choice-entry to the given element. |
| OverlayFix | |
| Change Log | $Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/3rdParty/Autocomplete/Autocompleter.js,v $ $Log: Autocompleter.js,v $ Revision 1.3 2007/06/12 20:26:52 newtona * empty log message * |
All functions are part of the Autocompleter namespace.
Base class for the Autocompleter classes.
| el | (DOM element or id) element to observe. |
| options | (object) key/value set of options. |
| minLength | (integer, default 1) Minimum length to start auto compliter |
| useSelection | (boolean, default true) Select completed text part (works only for appended strings) |
| markQuery | (boolean, default true) Mark queried string with <span class=”autocompleter-queried”>*</span> |
| inheritWidth | (boolean, default true) Inherit width for the autocompleter overlay from the input field |
| maxChoices | (integer, default 10). Maximum of suggested fields. |
| injectChoice | (function, optional). Callback for injecting the list element with the arguments (itemValue, itemIndex), take a look at updateChoices for default behaviour. |
| onSelect | Event Function. Fires when when an item gets selected. |
| onShow | Event Function. Fires when autocompleter list shows. |
| onHide | Event Function. Fires when autocompleter list hides. |
| customTarget | (element, optional). Allows to override the autocompleter list element with your own list element. |
| className | (string, default ‘autocompleter-choices’). Class name for the list element. |
| zIndex | (integer, default 42). z-Index for the list element. |
| observerOptions | optional Options Object. For the Observer class. |
| fxOptions | optional Options Object. For the Fx.Style on the list element. |
| allowMulti | (boolean, defaults to false) allow more than one value, seperated by a delimeter |
| delimeter | (string) default delimter between multi values (defaults to “, “) |
| autotrim | (boolean) trim the delimeter on blur |
| allowDupes | (boolean, defaults to false) if multi, prevent duplicate entries |
| baseHref | (string) the base url where the css and image assets are located (defaults to cnet’s servers you should change) |
If you’re not cnet, you should download these assets to your own local: http://www.cnet.com- /html- /rb- /assets- /global- /autocompleter- /Autocompleter.css http://www.cnet.com- /html- /rb- /assets- /global- /autocompleter- /spinner.gif
Then either change this script or pass in the local when you instantiate the class.
This base class is not used directly (but rather its inheritants are such as Autocompleter.Ajax) so there is no example here.
| Properties | |
| build | Builds the html structure for choices and appends the events to the element. |
| getQueryValue | Returns the user’s input to use to match against the full list. |
| destroy | Remove the autocomplete functionality from the input. |
| hideChoices | Hides the choices from the user. |
| showChoices | Shows the choices to the user. |
| markQueryValue | Marks the queried word in the given string with <span class=”autocompleter-queried”>*</span> Call this i.e. |
| addChoiceEvents | Appends the needed event handlers for a choice-entry to the given element. |
Builds the html structure for choices and appends the events to the element. Override this function to modify the html generation.
Returns the user’s input to use to match against the full list. When options.multi == true, this value is the last entered string after the last index of the delimeter.
| value | (string) optional, the value to clean; defaults to this.observer.value |
user input: blue
getQueryValue() returns "blue"
user input: blue, green, yellow
options.multi = true
options.delimter = ", "
getQueryValue() returns "yellow"
user input: blue, green, yellow,
options.multi = true
options.delimter = ", "
getQueryValue() returns ""
Marks the queried word in the given string with <span class=”autocompleter-queried”>*</span> Call this i.e. from your custom parseChoices, same for addChoiceEvents
| txt | (string) the string to mark |
Appends the needed event handlers for a choice-entry to the given element.
| el | (DOM element or id) the element to add |
| Private class used by <Autocompleter> | basically an IframeShim. |
$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/3rdParty/Autocomplete/Autocompleter.js,v $ $Log: Autocompleter.js,v $ Revision 1.3 2007/06/12 20:26:52 newtona * empty log message *
Revision 1.2 2007/06/07 18:43:35 newtona added CSS to autocompleter.js removed string.cnet.js dependencies from template parser and stickyWin.default.layout.js
Revision 1.1 2007/06/02 01:35:17 newtona * empty log message *
