Autocompleter from scratch in Prototype. Mostly Scriptaculous-compliant, can use the same stylesheets, for example. The server must return a specially-formatted UL as the result of a search.

autocomplete.js

$$('input.autocomplete').each(function(elm){
  var autocompleter = elm.clone().setValue('');
  autocompleter.name = null;
  autocompleter.id = null;
  var wrap = elm.wrap('div', {'class': 'wrap', 'style': 'position: relative'});
  wrap.insert(autocompleter);
  elm.type = 'hidden';
  elm.removeClassName('autocomplete');
  var result = new Element('div', {'class': 'autocomplete-results', 'style': 'display:none'});
  wrap.insert(result);
  autocompleter.observe('click', function(){ this.activate(); })
  autocompleter.observe('keyup', function(evt){
    if($F(autocompleter).length > 2){
      new Ajax.Updater(result, '/path/to/search/method', {parameters: { value: $F(autocompleter) }, onSuccess: function(){ result.show(); }});
    }
  });
  result.on('click', 'li', function(evt, li){
    elm.setValue(li.id.split('_').last().gsub(/[^\d]/, ''));
    autocompleter.setValue(li.innerHTML.strip());
    result.update().hide();
  });
});

example-search-results.html

<ul>
  <li id="foo_1">Answer One</li>
  <li id="foo_3">Answer Three</li>
  <li id="foo_42">The Answer to the Ultimate Question of Life, the Universe, and Everything</li>
</ul>

style.css

.autocomplete-results ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  margin-top: -1em;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  z-index: 200;
}

.autocomplete-results li {
  list-style-type: none;
  padding: 3px 8px;
  background-color: #ffc;
  font-size: 12px;
  color: #333;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

.autocomplete-results li:hover {
  background-color: #ff9;
}

.autocomplete-results {
  position: relative;
}