simple scriptaculous Autocomplete with DWR & select – Boxes

February 9, 2006

coming across this really nice scriptaculous autocomplete feature on

http://wiki.script.aculo.us/scriptaculous/show/Autocompleter.Local

Autocomplete

i wanted a simple solution to use this Function. I’m using DWRUtil.addOptions to fill my select boxes with values. These selectBoxes already serve as proposal-Values for the correlating Input-Fields. So i had all the data needed to create a nice type-ahead system, without performance – impact, already loaded onto the page.

i’d didn’t want an Ajax – request to be sent out each time the user types in a letter. So the only thing i needed to do was to parse the data provided in the select box and give it to the Autocompleter.local. For that purpose i created a simple javascript function named “genAutocomplete” that is being called after the DWRUtil.addOptions.

// configGroupSelect: the select box filled by DWRUtil.addOptions

// configGroup the input field, filled by the autocomplete

// config_list the div-id with the suggested values

function genAutocomplete(){

var mySelect= document.getElementById(‘configGroupSelect’);

var i;

var resultArray=new Array();
for (i=0; i < mySelect.options.length; i++) {
resultArray[i] =mySelect.options[i].value;
}

new Autocompleter.Local(‘configGroup’, ‘config_list’, resultArray, {});

}

Rubén Parés-Selders