CwComplete

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) and Element.Shortcuts (More)

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 »

Changelog

1.0

Added pause-option (thanks Dave Harris), some small improvements

0.70

Bugfix IE misunderstanding scrollbar clicks, code cleanup

0.60

Documentation updates

0.50

New options, thx Werner Mollentze

0.40

Mootools 1.3 compatibility

0.38

Version number, variables check

0.36

Bugfix IE mousedown/click chaos

0.34

Bugfix onblur()

0.33

onblur-handler

0.31

doretrievevalues added, demo updated, ajax optional

0.3

Initial release on forge

33 Replies to “CwComplete”

Dave Harris says:

August 5, 2011 at 11:55

Hi,
I’ve been using cwcomplete, I made a small modification so it doesn’t keep hitting the lookup script on every keypress, rather it waits for the user to stop typing, I added a time for the script to wait to see if the user changes their typing.
I added;

pause: 1000

into the options and then modified getValues:

getValues: function(input)
{
self = this;
var t_input = input;

if (this.options.doRetrieveValues != null) {
this.setValues(this.options.doRetrieveValues.apply(input));
}
else if (this.ajax) {
this.choices.hide();
this.container.addClass(this.options.suggestionBoxLoadingClass);
this.container.show();
// dont spam the lookup script wait to see if typing has stopped
window.setTimeout(
function() {
if( t_input == self.textfield.get(‘value’)){
self.ajax.send(self.options.ajaxParam+”=”+t_input);
}else{
self.ajax.cancel();
}
}, self.options.pause);
}
},

thanks again!

Reply
1. Mario says:
  
  August 5, 2011 at 21:26
  
  Hi –
  
  very good idea, thanks a lot. I’ll integrate this probably in the next release after testing.
  
  Reply
Kolin says:

April 20, 2011 at 10:01

Hi, i think i’ve come across an issue with the IE browsers (all flavours IE6,7,8), when the drop down appears, the text seems to be indented, I can’t find a solution in either the JS or CSS

This happens on the demo on this site as well. If the text wraps around to the next line, you can see an indent on the top line.

Ta

Reply
1. Mario says:
  
  April 20, 2011 at 10:55
  
  Hi –
  
  it’s a CSS problem..
  
  change this:
  list-style-position: inside;
  to that:
  list-style-position: outside;
  
  This should fix the IE display. (otherwise tell me, if it doesn’t help)
  
  Reply
  1. Kolin says:
    
    April 20, 2011 at 11:31
    
    brilliant! thanks! (also for the quick reply!)
    
    Reply
Ricardo says:

February 17, 2011 at 18:35

On internet explorer, when i click on the scroll bar, the options list disapear…

Reply
1. Mario says:
  
  February 17, 2011 at 19:14
  
  Yes, I checked it. Happens…suprise, surprise in IE 6 and 7. This browsers are too stupid to check the click-target and *think* the user has clicked in the document.
  
  I’ll have a look the next days on how to fix this. Thanks for reporting.
  
  Reply
2. Mario says:
  
  February 19, 2011 at 15:45
  
  Okay.. I fixed it (quite an annoying bug..)
  
  You can test it on the demo page – and download the latest version (0.7)
  
  ~~If you have problems downloading: Github seems to be down at the moment – so maybe wait an hour ro so..~~
  
  Reply
  1. Ricardo says:
    
    February 19, 2011 at 19:34
    
    Thx a lot. Ill test it. You rock! =)
    
    Reply
Henrik says:

February 15, 2011 at 23:02

Great example! Is there anyway to return images along with the suggestion? For example, Facebook’s User Search or Apple’s search field returns suggestions with thumbnails alongside them. Cheers

Reply
1. Mario says:
  
  February 16, 2011 at 09:51
  
  Hi –
  
  that’s a cool idea.
  ..and possible: I updated the demo page: There are now country flags included.
  
  Therefore simply add the IMG-tag (or whatever HTML-Code is necessary) to the list of values you provide via Ajax. So the PHP example on the Help-page would look like this:
  
  $values = array( array('de',' Germany'), array('fr',' France'), array('us',' United States'), array('uk',' United Kingdom'), );
  
  Reply
  1. Henrik says:
    
    February 16, 2011 at 16:18
    
    Cheers Mario! Thanks for such a prompt response—and it looks great! Will let you know when I get a chance to use this in a project.
    
    Reply
Romain says:

September 26, 2010 at 13:50

Hello,

I find the project very well nothing to say, I object to adapt this into a dynamic whois but I have a small problem with customization of the div that appear automatically I would like to know if it was possible for example to change two div to float, I’m not good enough at javasacript to change it.

Thank you

Reply
1. Mario says:
  
  September 29, 2010 at 21:55
  
  Hi –
  
  you can style the DIVs via CSS – the class IDs are cwCompleteOuter, cwCompleteChoices and so on.. (They can also be renamed by setting the appropriate option if necessary).
  
  Reply
NewCar says:

September 21, 2010 at 23:58

Great tool!

The problem with mouse selection not working on IE was solved on version 0.40.

Thx a lot and keep the great work!

Reply
Florian says:

August 24, 2010 at 07:28

Hi, I’l like to empty the main field + hidden input when the main field is focused.
When i empty the main field, the hidden value stay…
Do you think this could be done easily ?
Thanks.

Reply
1. Mario says:
  
  August 24, 2010 at 21:21
  
  I’m not exactly sure what you mean – you can send me the javascript via mail or the URL where I can see it, then I’ll have a look!
  
  Reply
  1. Florian says:
    
    August 26, 2010 at 19:45
    
    Hi, i just added this method :
    
    clearFields: function(obj) {
    if ($(this.options.targetfieldForKey)) {
    $(this.options.targetfieldForKey).value = ”;
    }
    
    if ($(this.options.targetfieldForValue)) {
    $(this.options.targetfieldForValue).value = ”;
    }
    else {
    this.textfield.value = ”;
    }
    }
    
    AND Added an Event on Field :
    
    ‘focus’: this.clearFields.bind(this)
    
    Reply
    1. Mario says:
      
      August 27, 2010 at 21:06
      
      I tried out your code and it works – textfield and the hidden field are being reset on focus.
      
      An idea: Debug it by changing the hidden field into a text field then you can immediately see what happens. And add “console.log()”-methods for testing in the clearFields-method.
      
      Hope that helps!
      (I’ll be on vacation the next two weeks so if you still have a problem, my answer will take longer..)
      
      Reply
Florian says:

August 17, 2010 at 09:01

Hi, seem don’t be working in IE (clicking the liste element don’t update the field), but working by keyboard nav…

I have the same problem on my site and on your own sitewigth IE8, IE7.

Reply
1. Mario says:
  
  August 17, 2010 at 09:40
  
  I see – thanks for pointing this out.
  
  I already have an idea what the problem might be and have a look. So I think tomorrow the bug *should* be fixed…
  
  Reply
2. Mario says:
  
  August 17, 2010 at 18:23
  
  So, the bug is fixed in the current release (0.40) at Mootools Forge ».
  
  Reply
Pingback: Moduli, di tutto di più — Studio404 Web Agency
Thomas says:

February 2, 2010 at 21:25

Hi,

It looks like the blur will fire and the click event will never fire?

No click with blur event, am I correct?

Reply
1. Mario says:
  
  February 2, 2010 at 23:47
  
  Yes, thanks – I somehow overlooked this. Should be fixed in the latest version (0.36).
  
  Reply
Adam Meyer says:

January 24, 2010 at 18:14

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.

Reply
1. Mario says:
  
  January 25, 2010 at 19:04
  
  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.
  
  Reply
  1. Adam Meyer says:
    
    January 25, 2010 at 19:14
    
    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 () });
    
    Reply
    1. Mario says:
      
      January 25, 2010 at 19:18
      
      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!
      
      Reply
Michael Pehl says:

January 14, 2010 at 18:53

Very nice. For sure of use for my new project :D

Reply
Ricardo says:

January 14, 2010 at 02:02

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!

Reply
1. Mario says:
  
  January 14, 2010 at 02:32
  
  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.
  
  Reply
2. Mario says:
  
  January 15, 2010 at 21:10
  
  Have a look at the updated version – now you can use a javascript array.
  
  Reply