Script.aculo.us Autocompleter Woes

Sometimes programming can make you question your sanity. If you don’t think you’ve crossed the line there, you might at least wonder whether you should take up something a little more tangible, like backhoe operator. Such was the case as I scoured the documentation for the Script.aculo.us Ajax Autocompleter. Ultimately, I was to blame it on the lack of a crystalline, 100% matched example for my problem. I must state for the record that Prototype and Scriptaculous are nothing short of miraculous when it comes to making Javascript accessible to the unwashed like me. All the same, I have spent many hours over the last couple of days getting the Autocompleter to work.

My first problem was that I needed to autocomplete on Cities when given a country and state. The trouble is that when you set up the listener (ie. the “new Ajax.Autocompleter()” line), you can specify some parameters that are static. Static parameters wouldn’t do me much good since the user is going to choose a state and country from drop-downs. I needed to be able to grab those parameters right before the Ajax call. Well, I skipped right by the documentation on the “callback” parameter not thinking that a callback would be an event that fires right before the Ajax call to the server is made. Well, sure enough, that’s the trick. You can give it a function in the callback parameter (e.g. callback: getStateAndCountry, …), and this function get called just before the Ajax call, and it’s return becomes Post key and value pairs, in addition to a key/value that is the “name” and “value” of the form element that you are autocompleting. There were no examples of this, so I searched in vain for a couple of hours….Arrrgh!

Second problem….after figuring out the first problem, I had a second problem in Internet Explorer. When typing into the auto-complete field, the returned list would flash up and immediately hide itself on the first time the call went to the server. After that first Ajax call, all the subsequent calls worked fine. Well, there goes another 3 hours. I tried going backwards in versions to Scriptaculous version 1.7.0 to see if that would help. I had been running 1.8.1. When I switched back to 1.7.0, everything seemed to work. I was fooled. It worked in IE 7 but not IE 6. Next, I slowly stripped my web page of every single tag that wasn’t absolutlely necessary (I had already confirmed that a stripped down page would work with it). It turned out that the problem was that I had an Action parameter and a Method parameter in my Form tag. Took those out, and Bingo! I haven’t figured out whether it was the Action or the Method.

After figuring out problem 2, I decide that I should upgrade my Prototype and Scriptaculous code to the latest/greatest. So back to 1.8.1 for Scriptaculous and 1.6.0.2 for Prototype. I give it a shot in Firefox and when making a selection from the returned list and hitting enter, the form Submit gets fired…Oh, please!!!! That’s just not right! So I load back up 1.7.0 and, ah, back in black. It shouldn’t be this hard. Probably isn’t for normal people, but I had to vent.

I plan to post my example of the callback function soon. It is just a great example that might help someone.

Cheers…at last

Byron

,

7 Responses to Script.aculo.us Autocompleter Woes

  1. haydeniv October 16, 2008 at 12:51 am #

    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

  2. Byron Bennett October 16, 2008 at 7:27 am #

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

    Byron

  3. another.designer September 26, 2009 at 4:42 pm #

    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);
    }

  4. Patrick December 8, 2009 at 8:22 pm #

    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

  5. Byron Bennett December 8, 2009 at 9:05 pm #

    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

  6. Patrick December 8, 2009 at 9:55 pm #

    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

  7. Byron Bennett December 8, 2009 at 10:16 pm #

    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

Powered by WordPress. Designed by Woo Themes