To implement dynamic autocomplete with additional parameter
1. Include
<%= javascript_include_tag :defaults%>
<script src="/include/prototype.js" type="text/javascript"></script>
<script src="/include/scriptaculous.js" type="text/javascript"></script>
prototype.js & scriptaculous.js are available on http://wiki.script.aculo.us/
2.
<input type="text" id="autocomplete" name="attribute_lookup"/>
<div class="autocomplete" id="attribute_lookup_auto_complete"></div>
<%= javascript_tag("new Ajax.Autocompleter('autocomplete', 'attribute_lookup_auto_complete','/server/url', { fullSearch: true, frequency: 0, minChars: 1, callback: eventDateCallback});")%>
3.
Write javascript to handle callback
<SCRIPT language=javascript>
function eventDateCallback(element, entry) {
return entry + "&additionalParam=" + document.myForm.additionalparam.value;
}
</SCRIPT>
4.
Add autocomplete 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;
}
5.
Add method in controller which returns array of string
6.
Implement view for returned items. Return list should looks like e.g.
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
