CwComplete
Posted 1 month ago.
About / Feedback • Demo • Help / Download
This is a small mootools autocompletion tool.
Requirements
- Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6, IE 7, IE 8 and Opera 9+
- Requires mootools 1.23+ (Core)
Features
- Easy to use, simply provide the input field and an Ajax-URL
- Values can also be provided via javascript
- Usable with keyboard and mouse
Demo
- Try it out here: CwComplete Demo »
Questions?
- Write a comment (below) or click here: CwComplete Help »
Also like to have an avatar image? Get one at gravatar.com (free) »
Hi,
It looks like the blur will fire and the click event will never fire?
No click with blur event, am I correct?
Yes, thanks – I somehow overlooked this. Should be fixed in the latest version (0.36).
Great plugin.
Im actually building this into my site right now, but I had to make a few mods I thought you may want to consider implementing.
If you apply this to a “tag” field for instance, you want the user to type in the name of the tag, and if there are partial matches show them as options, and if they are not what the user wants, they can keep typing and hit enter.
But with this plugin, if the user wants to tag it is “hello” and it finds “hello world”, hitting return will enter “hello world” even though they intended their new tag to be the one that is used.
So I removed the part that auto selects the first item, and instead made it it so the user must first press the down arrow once to select the first item. This is the user saying “yes, I would like to use that suggestion”.
Also, if a user clicks out side of the suggestion box it should close the suggestion. Clicking out takes away focus from the input, and says the user is no longer interested in working in that field.
Imagine if the box was covering up content, or the next field. Pressing tab would go to the next field, but the suggestions may still cover it up. Or without hitting “esc” the user may not be able to select the next input (using the mouse).
So I added a click listener on the window that closes the suggestions.
Hi -
thanks, could you send me the changes? I’d like to look ath them and incorporate them in the next version.
Whereas I’m not sure if the tag-like feature is what everyone needs – but the window-handler makes very much sense.
Yeah… Where should I send it?
I couldn’t get the window close working inside the class so I just did
window . addEvent ( ‘click’ , function(){ classInstanceName . clearChoices () });
mario at chipwreck dot de –
Regarding the “clicking elsewhere”-feature: That can be easily done with a onblur()-handler on the textfield, will be in the next release.
thanks for your suggestions!
Very nice. For sure of use for my new project :D
really liked CwComplete, thx for the code.
I would like to use it as a select box, where i can type the name of something or just click it, the diference is that i would like to load the the values not from ajax call, but from an JavaScript Array (or hash), so its really quick and user can select values just selecting.
Something like: http://digitarald.de/project/autocompleter/1-1/showcase/local/
Is it possible?
Thx!
Yes, I already thought of that – since in some cases an ajax request is not necessary.
As a first workaround you could use a static PHP-page, which delivers the values JSON-encoded (see the example on the bottom of the help page). But I’ll add the possibility to override the ajax call so you can put values in there via javascript.
Have a look at the updated version – now you can use a javascript array.