simple scriptaculous Autocomplete with DWR & select - Boxes

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

11 Responses to “simple scriptaculous Autocomplete with DWR & select - Boxes”

  1. Alice Says:

    I am trying the same but invain i dont see the values for mySelect and the resultArray is null. can u explain me why??

    Thanks!
    Alice..

  2. rubens Says:

    if the select is empty, you\’ll have some problems with the function triggered with DWRUtil.addOptions. If this function returns no data, the select keeps being empty.

  3. rubens Says:

    for a test put some hardcoded into the select and repeat the test..if the resultArray keeps being empty, mabe you have a typo referring to the select-name..

  4. Alice Says:

    Thanks! I got it worked! This post was very useful to me! Thanks again!!!!

  5. Alice Says:

    Actually i did not use DWRtil.addOptions since i dont want to display any of those strings in another select box so i just called productManager.getPersons() and then the data which i get from the same is being sent to genAutocomplete(data) . This data is being passed to the new Autocompleter.Local(’configGroup’, ‘config_list’, data, {}); Hope u got my point!! Thank you very much for such a quick reply! thanks!

  6. Alice Says:

    Hi,
    I am back. This time i am trying to use Ajax.Autocompleter http://demo.script.aculo.us/ajax/autocompleter. The reason i want to do this instead of Autocompleter.local is its very slow when i use local even afterr caching. And i need help here.

    new Ajax.Autocompleter(’contact_name’, ‘contact_name_auto_complete’, ‘/ajax/auto_complete_for_contact_name’, {})

    And i want to know what is ‘/ajax/auto_complete_for_contact_name’. How is the data being populated. And my environment is spring and java. So if anyone could help me how this whole is working i would be really glad. The constructor is new Ajax.Autocompleter(’id’,'upd’, ‘/url/’, { tokens: ‘,’ })
    But what is this url? and howshould i define? please let me know!!

    Thanks!
    Alice.

  7. rubens Says:

    @Alice and others encounting performance issues with the approach presented here: If you can afford to generate Ajax callbacks to the backend (bandwith constraints where the driver for the local approach) I recommend this nice step by step guide presented by Jettro Coenradie based on work of Bram Smeets from DWR presented here:

    http://www.gridshore.nl/blog/index.php?/archives/52-Creating-an-autocomplete-with-Spring-and-DWR.html

    More information can be found in this relating thread:
    http://www.nabble.com/scriptaculous-autocompleter-and-accessing-response-from-calling-code-t1194940.html

  8. bruce Says:

    Alice,

    Did you every get the response you needed? I have a similar situation coming up and I will need a solution also.

  9. paydayloan Says:

    There are satiate a advance day loan pay alarm
    waterfront pension is capable of doing that for you.
    If you are late on pledges, you village riping slapped with penalties.

  10. susan Says:

    One problem i had with this auto complete was that it wasn’t smart enough… ie… if my search term was missing a word, it couldn’t find what i was looking for.

    For example, in a db of cameras if I was looking for a “Camera PowerShot sd800 Digital Elph”
    but only remember the model number, not the full name …so i’d type in “Canon SD800″…and itd give me nothing
    It wasn’t until i typed in “Canon PowerShot SD…” that it found something. I needed it to ignore that I had forgotten PowerShot

    I found a real simple solution - which I describe in detail here - http://www.susanbuck.net/sb/words/index.asp?permanent=yes&permKey=163

  11. markofando Says:

    Want to start your private office arms race right now?

    I just got my own USB rocket launcher :-) Awsome thing.

    Plug into your computer and you got a remote controlled office missile launcher with 360 degrees horizontal and 45 degree vertival rotation with a range of more than 6 meters - which gives you a coverage of 113 square meters round your workplace.
    You can get the gadget here: http://tinyurl.com/2qul3c

    Check out the video they have on the page.

    Cheers

    Marko Fando

Leave a Reply