scriptaculous auto complete example

<style type="text/css">
    div.autocomplete {
      position:absolute;
      width:250px;
      background-color:white;
      border:1px solid #888;
      margin:0px;
      padding:0px;
    }
    div.autocomplete ul {
      list-style-type:none;
      margin:0px;
      padding:0px;
    }
    div.autocomplete ul li.selected { background-color: #ffb;}
    div.autocomplete ul li {
      list-style-type:none;
      display:block;
      margin:0;
      padding:2px;
      height:32px;
      cursor:pointer;
    }
</style>

<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="controls.js" type="text/javascript"></script>

<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<span id="indicator1" style="display: none"><img src="indicator.gif" alt="Working..." /></span>
<div id="autocomplete_choices" class="autocomplete"></div>

<script type="text/javascript">
function updateElemTest(selectedElement) { 
 alert(selectedElement.id);
 $('autocomplete').value = selectedElement.innerHTML;
}
function getSelectionId(input, li) {
    alert (input.value + ' + ' + li.id);
}
function calledOnHide(input, update) {
    new Effect.Fade(update,{duration: 1})
}

//new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "ajax_response.html", {
//  paramName: "value",
//  minChars: 2,
//  updateElement: updateElemTest, //取代默认方法（更新input），用户自定义更新
//  indicator: 'indicator1'
//  });

//new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "ajax_response.html", {
//  paramName: "value", //本来默认传过去的参数名是input name，可以重定义覆盖此名字
//  minChars: 2,
//  afterUpdateElement : getSelectionId, //只发生在默认更新动作发生之后
//  indicator: 'indicator1'
//  });

var my_completer = new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "ajax_response.html", { onHide: calledOnHide });
</script>

<!--
ajax_response.html example:
<ul>
    <li id="1">yes</li>
    <li id="2">no</li>
    <li id="3">thanks</li>
</ul>
-->