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

Advertisements

35 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. keno says:

    can u make it more readable? like step by step basis! i need this code! coz i have a problem in my select list dwr! i need a editable select list so i can choose or type on a select box! is that posible using dwr?

  10. Finicking says:

    Somehow i missed the point. Probably lost in translation 🙂 Anyway … nice blog to visit.

    cheers, Finicking!!!!

  11. […] – Simple Scriptaculous autocomplete […]

  12. […] – Simple Scriptaculous autocomplete […]

  13. seo backlink checker software

    simple scriptaculous Autocomplete with DWR & select – Boxes | .: RockIT :.

  14. best seo software forum

    simple scriptaculous Autocomplete with DWR & select – Boxes | .: RockIT :.

  15. I couldn’t resist commenting. Perfectly written!

  16. Endocarditis says:

    Diets high in fat and protein are usually effective
    for people in losing weight. Whether it’s in your neck, back,
    feet, or any part of the body, our bodies should not hurt, and we
    should not have to compensate for pain. When insurance companies stress preventive health,
    they always emphasize doctor exams over laboratory tests.

  17. […] Script.aculo.us 包含了一个 Autocompleter.Local 函数,该函数可以与DWR融为一体。使用’Local’版本并远程协同DWR工作比使用’Remote’ 版本容易的多,因为后者还需要知道服务端怎样工作。更多有所帮助的信息请参考这封在 dwr-users 邮件列表的信 ,或者Rubens的这篇博文。 […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: