Friday, October 20, 2006

Wicket autocompletion improvements

Here is how I extended Wicket's (version 1.2.2) autocompletion with 2 new features:
- immediatate open of the drop-down as soon as the text field gets focus
- define the width of the drop-down independent of the text field

As the JavaScript is well hidden within Wicket and is not easy to extend, I tried another approach that worked well. I created the package wicket.extensions.ajax.markup.html.autocomplete and placed my own edit of wicket-autocomplete.js. Because the package is compiled into my WAR I am sure it is the first on the classpath.

First of all, in the initialize function I added the following fragment:

 if (obj.className.indexOf('immediateopen') != -1) {
     obj.onfocus=function(event){
         updateChoices();
         return null;
     }
 }
Secondly I changed function showAutoComplete to the following:
 function showAutoComplete(){
     var position=getPosition(wicketGet(elementId));
     var menu=getAutocompleteMenu();
     var input=wicketGet(elementId);
     var rem = input.className.match(/\bmenuwidth(\d+)\b/);
     var menuwidth = (rem == null) ? input.offsetWidth : rem[1];
     menu.show();
     menu.style.left=position[0]+'px'
     menu.style.top=(input.offsetHeight+position[1])+'px';
     menu.style.width=menuwidth+'px';
     visible=1;
     hideShowCovered();
 }
That's it. Its fully backward compatible, except that if you use the classes immediateopen or menuwidthXXX you'll get the new behavior. If you are lazy, you can download the complete file.

Example:

  <input class="inputcode immediateopen menuwidth300" type="text" />

7 comments:

  1. Kudos for that - nice kludge.
    Although usage of the classname for specifying parameter values gets a gigantinc *grmpf* and a very big frown from me, it is still a nice piece of work... :)

    ReplyDelete
  2. Indeed, nice kludge huh. I was smiling when I wrote this 8)

    ReplyDelete
  3. Please don't put style specific stuff in your javascript! It is possible to use a semantic class in stead like "menu-medium" and have the javascript transfer the class to the div of the auto complete list.

    ReplyDelete
  4. and what about autocompletion after specific amount of time?

    ReplyDelete
  5. Wicket's autocomplete javascript is in constant flux. Last time I checked you can pass options from java code.

    Adding autocompletion after specific amount of time would not be that hard and make a nice addition. Go ahead, create a patch.

    ReplyDelete
  6. Hi,

    I want to use wickt autosuggest with a model.How i can do that.

    ReplyDelete
  7. Dear anonymous, please find Wicket support in the mailing lists.

    For examples see the Wicket examples.

    All can be found from http://wicket.apache.org.

    ReplyDelete