[% 
    page.js.push('prototype',
                'scriptaculous/effects', 
                'scriptaculous/controls');
    page.css.push('autocomplete');

# 'input' object should have following keys/methods:
#
#   id
#   label (optional)
#   name (optional - defaults to id. used as param name for query.)
#   url
#   csize (optional - defaults to same size as css div)
#   value (optional)

%]

[% input.label %]
<input autocomplete="off" [% # do not let browser complete it for you %]
       id="[% input.id %]" 
       name="[% input.name || input.id %]" 
       size="[% input.csize || '30' %]" [% # 30 matches autocomplete.css %]
       type="text" 
       value="[% input.value %]" />
<span class="auto_complete" id="[% input.id %]_auto_complete"></span>
<script type="text/javascript">

    var [% input.id %]_autocompleter = new Ajax.Autocompleter(
        '[% input.id %]', 
        '[% input.id %]_auto_complete', 
        '[% input.url %]', 
        {
         minChars: 1
        });
    //alert("autocompleter set for [% input.id %]");
    
</script>
