So the other day I had a little task of creating an autocomplete widget that supported IE6 and a JSON webservice. The script.aculo.us Autocomplete control actually takes in an HTML partial rather than a proper JSON or XML data format. Furthermore, the keyboard navigation of the autocomplete widget fails in IE6.
This was resolved by changing the attached keyboard event listener from 'keypress' to 'keydown'.
I pulled out the script.aculo.us class and modified the AJAX handler to support a JSON webservice. This was necessary in order to be able to plug in the autocomplete widget into an existing ASP.NET webservice that was returning a string[] array. Copying out my own instance of this component seemed like the best choice since patching the existing script.aculo.us framework would break any chance of doing future upgrades on the library as a whole.
from a design perspective, since an autocomplete widget is really only displaying data, it makes sense that it should call a webservice. It also makes sense that the client have the responsibility of choosing how its viewed. This is accomplished through the 'choicesToHtml()' method that I've added to the class.
Download a JSON-compatible modification to the scriptaculo.us autocomplete component:
JsonAutoComplete.rtf
You could then drop it into your page like an existing ajax control like the one in the scriptaculous sample:
<input id="contact_name" name="contact[name]" size="30" type="text" />
<div class="auto_complete" id="contact_name_auto_complete"></div>
<script type="text/javascript">
var contact_name_auto_completer = new MyAjaxAutocompleter('contact_name', 'contact_name_auto_complete', '/ajax/auto_complete_for_contact_name', {})
</script>
Technorati Tags: ASP.NET, AJAX, Script.aculo.us, Web Service
{ 3 comments… read them below or add one }
Hello Jon
I would like to ask a question – how would you implement this?
I am currently using the above mentioned autocomplete but it is processed using PHP and a MySQL database (but the response time is far too slow for an autocomplete field. Just not sure how to process using JavaScript or PHP – just replacing the data from the database with a JSON array? In any case, nice work that man.
Hi Pudding,
Thanks for taking the time to take a look. On the server-side, you need to create a JSON array. You can do this manually, however the Zend Framework has components that facilitate this.
I ended up making a fully-downloadable project that shows how you can do this using the Zend Framework: http://jon.lebensold.ca/creative-stuff/demo-ajax-autocompleter-with-scriptaculous-and-a-zend-json-web-service
Let me know if this helps.
Thanks,
j
One question. When you say “modification to the scriptaculo.us autocomplete component”, do you mean the controsl.js file?