The script.aculo.us Ajax.Autocompleter is basically a generic version of Google suggest. There is an excellent demo online.
But, some times the criteria you send to the server changes as the page state changes. I’ll describe a very common scenario that I encountered yesterday. I had a list of email addresses for a webmail client I maintain for work. Users don’t want to see addresses suggested, that they already put in their to field.
When I construct the Autocompleter, the to field is empty. You can pass the contents of the to field to the server, but if you did:
parameters: Form.Element.serialize(”to”)
You will always get to= because that is what it evaluates to when you construct the Autocompleter. The problem became obvious almost immediately, but the solution took me a little time to figure out. Fortunately, after diving into the code, I found what I needed already existed. You need to pass an option to the constructor called callback. This poorly named option gets called right before every Ajax server request. This expects you to return a parameter string that gets sent to the server. Here is a sample implementation.
callback: function(element, entry) { return entry + “&” + Form.Element.serialize(”to”); }
This snippet would be included as an option on the Ajax.Autocompleter constructor call. Your responsibility when implementing this, is to pass along the second parameter, entry, plus any dynamic content. You can assume you never have to muck with the entry parameter. In this example we are just doing a Form.Element.serialize on the to form field. Theoretical output would be to=fake@user.com, but it would change as you added more and more addresses to the to field.
Absolutely brilliant mate. Thanks!
Really nice!
Hi I’m a js newbie - this looks likes exactly what I’m trying to do; but i think my syntax is incorrect: if it isn’t alot of trouble could you post up an the example above as it would be in the HTML page? thanks!
Unfortunately I don’t have an html demo to show you off hand, but here is the some more syntax:
new Ajax.Autocompleter(”field_to_autocomplete”,
”div_to_show_choices”,
”/url/on/server”,
{callback:
function(element, entry) {
return entry + “&” + Form.Element.serialize(”to”);
}
}
);
Ugh, that is a lot of brackets!
[...] I’ve often found the scriptaculous docs to be rather lacking (the jQuery docs tend to be much better for instance), and today I ran into another issue. While the docs for Ajax.Autocompleter do mention the callback method, it wasn’t really clear till I came across a great post by Nicholas Schlueter on dynamic parameters for Ajax.Autocompleter. Combined with a handy bit of javascript from my buddy Rex Chung for getting radio group values and I had a solution to my problem (of how to return parameters in my AJAX request with dynamic data from user input into a radio group) [...]
thanks!!!!!!!!!!!!!! exactly what i was looking for
Thanks for the great tip! This thing should really be more emphasized on the autocompleter page.
heh, first link on google, excately what i needed, thanks.
Hello all, I’m very happy I found this site. I’ve been struggling to get my autocompleter to work. I’m using the autocompleter to allow a user to find a person’s name in the system, but I don’t want to pass the name I want to pass the person’s ID. Can you look at my code to let me know what I’m doing wrong?
— The JS
<code> var myAutoCompleter = new Ajax.Autocompleter('friendinput', 'suggestionBox', '/friends/suggest/index.cfm',{callback:function(element, reqpersonid) {return reqpersonid + "&amp;" + Form.Element.serialize("reqpersonid");}, afterUpdateElement : updatePersonId}); <br /> function updatePersonId(text, li) {<br /> $('reqpersonid').value = (li.id);<br /> }</code>— THE HTML
over a year later I can still say THANK YOU!!!!
hi,
this is exactly what i need, the whole callback thing got me messing about too. i’m a little lost on the whole entry-element syntax, when you wrote:
callback:
function(element, entry) {
return entry + “&” + Form.Element.serialize(”to”);
}
}
);
what exactly are “entry” and “element”?
should i replace those parameters with the values on my form, or does it automatically take from the basic field info of the autocompleter statement?
if you could give a more detailed example i would really appreciate it.
thanks,
Benjamin
Thanks for the tip =)
I found more info in this webpage: http://jigneshshah.blogspot.com/2008/04/ruby-ajaxautocompleter-with-callback.html
Thanks again =)
Really HelpFul. Here is how i used it to send the value $F(’localite’) which is, itself, modified by an AutoCompleter.
callback:function(element, entry) {
return entry + ‘&’ + $H({
‘localite’:$F(’localite’),
‘ask’:'adresse’
}).toQueryString()
}
Hello,
Thanks, this really helped me!
Max.
Yeah… this pretty much saved me from what would have been hours of frustration. Why doesn’t scriptaculous provide these types of examples?
How can we pass more than one variable/input value dynamically to Ajax autocompleter
Hey man, thanks a lot !!!