jQuery Autocomplete Plugin 2
Continuing from my last post.
Some notes:
- You can give a wrapped set as a second argument to a selector such as: $(’p', wrappedSet). This is the same as wrappedSet.find(’p').
- The CSS selector ‘> *’ returns direct descendants of an element. For example, $(’> *’, $(’ul.fred’)) would bring back the list elements of any list with class ‘fred’.
- The JS function window.clearInterval() will clear a timeout set with window.setTimeout().
- What’s fascinating for me about this plugin is the size of it, it’s very small. Now I realize that it doesn’t do that much but the kernel is there. See this post for a discussion of different jQuery autocomplete plugins. The author of the bassistance autocomplete plugin (Jorn) has an interesting first comment.
What’s nice about this plugin is that it’s event driven. Sometimes that makes it hard to follow, but if you keep in mind to “just follow the events”, it’s not that hard. So, here are the events we need to follow:
These are the main input (autocomplete input text box) events:
- keyup Main input event that sets up the typing timeout (delay to autocomplete).
- keypress Main input event that
- autocomplete This is the event that triggers the autocomplete on an input control. See the autocomplete binding method for the behavior. Sets up a ‘one’ binding for the updateList event that does most the work.
- updateList This event updates the list and starts the autocomplete on the input after setting up the container (opt.wrapper element). This calls autocompleteMode which does the work.
These are the autocompleteMode events:
- activate.autocomplete This event is when the highlighted autocomplete list item is selected; either via the enter key or via a mouse click. Note line 51: active && input.trigger(”activate.autocomplete”, [$.data(active[0], “originalObject”)]); the input element does not have an actiavate.autocomplete handler on it but one can be added an dwill be called. This is the same for the cancel.autocomplete and itemSelected.autocomplete events.
- cancel.autocomplete This cancels the autocomplete, either from an escape key or from a click on the window object.
- off.autocomplete Does the work of actually turning off the autocomplete.
- itemSelected.autocomplete Triggered on input when autolist item is selected.
- keydown.autocomplete Straightforward; handles special keys (ESC, RETRUN, UP, DOWN, TAB).
- click.autocomplete Click handler.
- mouseover Mouseover handler.
The key event handlers are on the input element and the mouse event handlers are on the container (wrapper) element and the body/window.
Another thing to have in mind are the data contents for the elements:
- autocompleteMode (document.body) holds the current state of autocomplete on the current control; true if the autocomplete list is showing, false otherwise. Note that a global is all that’s needed since only one control is active at a time.
- suppressKey (document.body) if set, keypress on input element is cleared and returns ignoring key. This suppresses the up/down keypress when navigating the autocomplete list from clearing the autocomplete. This is not necessary since IE does not have a keydown/up keypress event; unfortunately, this suppresses valid keys in IE. See discussion here.
- originalObject (single element of autocomplete list, i.e. opt.template) this is set on every list (or opt.template) element in the matching autocomplete list. This is not state but rather a way to get back to the original object when an autocomplete item is selected.
- typingTimeout (input) the return from the setTimeout function so we can clear the timeout later. Not state.
Some other notes:
- I like how container is created around the autocomplete list and to remove you just have to do container.remove().
- I metioned the namespaced events in previous post, but this plugin makes nice use of them.
- The filter and map on list (lines 164-170) is very perlish/lispy; I love it.
I’m using a modified version with these changes:
- Fixed console in autocomplete.html for IE7.
- Fix suppressKey for IE (see above).
- Fix pressing tab/down/up before typingTimeout. (Not setting/clearing typeTimeout data on same element.)
- Bring down autocomplete list immediately on arrow up/down.
- Update autocomplete list on backspace and delete.
- Added a few comments prefixed with [B]
If you want it, I’ve zipped it up here:
jquery.autocomplete-0.7.1
Postscript: I know the detail is way too much on last few posts unless you are studying these in depth. But I needed to go though these and these are my notes. So … whatever :)
No Comments Yet