Autocomplete: MooTools and jQuery

Yesterday I wrote a post describing why I decided to switch from MooTools to jQuery, and today I have my first small comparison between the two. For one project that I am working on I have a simple autocomplete text input, and below I will show how I completed this little task in both MooTools and jQuery.

I am using plugins for both of the frameworks in order to accomplish this task, so this doesn't truly compare the functionality of the framework. But, this is a common task that I have and it starts to give me a feel for how the two match up.

The data returned from the server side script is different for each of these two methods. The MooTools Method gets an array returned, whereas the jQuery method gets the results returned as a newline delimited file (one autocomplete suggestion per line).

MooTools

rel="stylesheet" type="text/css" />

src="mootools/mootools-1.2.1-core-yc.js">

</script>

src="mootools/autocomplete/Observer.js">

</script>

src="mootools/autocomplete/Autocompleter.js">

</script>

src="mootools/autocomplete/Autocompleter.Request.js">

</script>

document.addEvent('domready', function() {

var networkcompleter =

new Autocompleter.Request.JSON('ac-network', '../list/network', {

'minLength': 2,

'indicatorClass': 'autocompleter-loading',

'postVar': 'q'

});

</script>

jQuery

href="jquery/jquery.autocomplete.css" />

src="jquery/jquery.js"></script>

src='jquery/jquery.bgiframe.js'></script>

src='jquery/jquery.autocomplete.js'></script>

$().ready(function() {

$("#ac-network").autocomplete('../list/network', {

minChars: 2

});

</script>

The Input Box

Update: 2009-03-31
While reading through the jQuery Blog, I found a nice plugin that is a “replacement for html textboxes and dropdowns, using ajax to retrieve and bind JSON data”. In other words, it's an autocompleter or suggest box. It is from Fairway Technologies and called FlexBox. It seems to be very powerful, check out some of the FlexBox demos.