Tuesday, April 29, 2008

Ruby Ajax.Autocompleter with callback


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>



       

No comments: