CwComplete

About / FeedbackDemoHelp / 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

Questions?

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”

  1. 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!

  2. 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

    1. 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)

    1. 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.

    2. 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..

  3. 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

    1. 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'),
      );

      1. 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.

  4. 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

    1. 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).

  5. 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.

      1. 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)

        1. 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..)

  6. 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.

    1. 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…

  7. 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.

    1. 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.

      1. 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 () });

        1. 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!

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *