Comments on: Script.aculo.us Autocompleter Woes

By: Byron Bennett

Byron Bennett — Wed, 09 Dec 2009 04:16:12 +0000

Thanks for the tip! Prototype and Scriptaculous are stellar choices for javascript libraries. But, jQuery has gained a lot of traction (even Microsoft adopted jQuery for inclusion with VIsual Studio). It’s tag line “Write less, do more” is very true. Worth a look.

Byron

By: Patrick

Patrick — Wed, 09 Dec 2009 03:55:39 +0000

Byron,

Thanks for the reply.

For others that stumble upon this thread, I just discovered a very simple way to do this.

new Ajax.Autocompleter(“city”,”hint3″,”city.php”,{callback: function(element, entry) { return entry + “&” + Form.Element.serialize(“state”); }});

“state” is the current value in the state form field and it gets passed to the php script.

See: http://www.simpltry.com/2007/01/30/ajaxautocompleter-dynamic-parameters/

Regardless, I may look into jQuery.

Best,
Patrick

By: Byron Bennett

Byron Bennett — Wed, 09 Dec 2009 03:05:11 +0000

Patrick,

Sorry, but I don’t remember if I did or not. I’ve switched from Prototype and Scriptaculous to jQuery. I have to say that I LOVE jQuery. Like everything, there’s a little bit of a learning curve, but the ability to run a function or attach an event to many different elements (like every element containing the class ‘form-field’ makes jQuery worth the move. I haven’t checked out the autocompleters for jQuery, but I’d bet there are some good ones.

Cheers,
Byron

By: Patrick

Patrick — Wed, 09 Dec 2009 02:22:53 +0000

Byron,

Did you sort out how to setup the call back function to autocomplete on cities when given a state, etc.? If so, I’d love to see a complete example. I’m not a java programmer and can’t quite sort out the example posted by haydeniv.

Thanks,
Patrick

By: another.designer

another.designer — Sat, 26 Sep 2009 22:42:54 +0000

i found this simple example helpful from http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter

new Ajax.Autocompleter(“autocomplete”, “autocomplete_choices”, “/url/on/server”, {
afterUpdateElement : getSelectionId
});

function getSelectionId(text, li) {
alert (li.id);
}

By: Byron Bennett

Byron Bennett — Thu, 16 Oct 2008 13:27:12 +0000

haydeniv,
Thanks for the tip! That was stumping me bad.

Byron

By: haydeniv

haydeniv — Thu, 16 Oct 2008 06:51:49 +0000

Here's an example for anyone who is bashing there head in on the callback function: Function:


function addItemToList(text, li) {
	var name = document.getElementById('city');
	var value = li.id;
	name.value = value;
	document.getElementById('city_id').value = li.id;
	document.getElementById('city').value = li.innerHTML;
	alert($F('city_id'));
}
function addItemToState(text, li) {
    // Do other stuff here
}
function callBackFunction() {
	return "name="+$F('state')+"&city_id="+$F('city_id');
}

HTML:


State: 
     City: 
     
      
      
      
new Ajax.Autocompleter("city", "name_choices", "/getCities.php", {paramName: "name", minChars: 2, afterUpdateElement: addItemToList, indicator: 'indicator1'});
      
new Ajax.Autocompleter("state", "name_choices", "/getStates.php", {paramName: "name", minChars: 2, afterUpdateElement: addItemToListState, indicator: 'indicator1', callback: getCityId});

Hope that helps. The key is in the documentation when you use callback it in essense overrides the original paramName so you have to add that value as well in the callback. Good Luck