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
<link href="mootools/autocomplete/Autocompleter.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="mootools/mootools-1.2.1-core-yc.js">
</script>
<script type="text/javascript"
src="mootools/autocomplete/Observer.js">
</script>
<script type="text/javascript"
src="mootools/autocomplete/Autocompleter.js">
</script>
<script type="text/javascript"
src="mootools/autocomplete/Autocompleter.Request.js">
</script>
<script type="text/javascript">
document.addEvent('domready', function() {
var networkcompleter =
new Autocompleter.Request.JSON('ac-network', '../list/network', {
'minLength': 2,
'indicatorClass': 'autocompleter-loading',
'postVar': 'q'
});
});
</script>
jQuery
<link rel="stylesheet" type="text/css"
href="jquery/jquery.autocomplete.css" />
<script type="text/javascript"
src="jquery/jquery.js"></script>
<script type='text/javascript'
src='jquery/jquery.bgiframe.js'></script>
<script type='text/javascript'
src='jquery/jquery.autocomplete.js'></script>
<script type="text/javascript">
$().ready(function() {
$("#ac-network").autocomplete('../list/network', {
minChars: 2
});
});
</script>
The Input Box
<input type="text" class="textlong" id="ac-network" name="ac-network" />
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.