How to extend the autocomplete script?

Question

Autocomplete in script.aculo.us expects the server response to be <ul> . Is there a way to extend or replace this behavior so that you can get a server response instead, which is an XML or JSON document?

Is there a way to expand the autocomplete tool to add a footer to the autocomplete list?

Answer 1

Yes, you can extend the behavior of script.aculo.us autocompleter. You do this by overriding the onComplete method with code that processes the json data and creates an <ul> -list for it. Then this list should be sent to updateChoices .

Suppose you get the following JSON response when you search for "U":

 [ "Unicorn", "University" ] 

An example of the Ajax.Autocompleter extension that can handle the answer above:

 var MyCompleter = Class.create(Ajax.Autocompleter, { initialize: function($super, id_search, id_list, url, options) { $super(id_search, id_list, url, options); }, onComplete: function(response) { var text = response.responseText; if (text.isJSON()) { this.handleJSON(text.evalJSON()); } // else do nothing }, handleJSON: function(json) { var htmlStr = '<ul>'; json.each(function(item) { htmlStr += '<li>'; htmlStr += item; htmlStr += '</li>'; }); htmlStr += '</ul>'; this.updateChoices(htmlStr); } }); 

There is also an example of how to replace the auto-assembly width reset .