Using autocomplete from script.aculo.us with sproutcore

Here is a how to use the Ajax.AutoComplete control from script.aculo.us with sproutcore.

Create the sproutcore project

sc-init autocomplete
cd autocomplete/

First thing we need to do is include scriptaculous.js in our project. So edit your sc-config.rb and uncomment the following line :

Where /javascript/scriptaculous.js is the path of scriptaculous.js on your web server.

Add a field on the page

We will work on the hello_word default page. Edit the english.lproj/body.rhtml file :

<% content_for('body') do %>
<div class="sc-welcome">
  <img class="logo" src="<%= static_url('images/sproutcore-logo') %>" />
  <div class="message">
    <h1>Welcome!</h1>
    <h3>You are now running SproutCore.</h3>
    <div class="sticky-note">
      <p>Things to do:</p>
      <ul>
        <li>Add a model:<br/>sc-gen model contacts/my_model</li>
        <li>Add a controller:<br/>sc-gen controller contacts/my_controller</li>
        <li>Edit english.lproj/body.rhtml</li>
        <li>Build for deployment:<br />sc-build</li>
      </ul>
    </div>

    <!-- AUTO COMPLETE HERE -->
       <% view do %>
       <div id="autocomplete_choices" class="autocomplete" style="display: none;"></div>
    Type some text here and then clic in the list ! <br />
    <%= text_field_view :name => "name_of_input", 
                        :outlet => true, 
                        :attributes => { :id => "my_input"} %>
      <% end %>
    <!-- AUTO COMPLETE HERE -->

  </div>
</div>
<% end %>

• an autocomplete_choices div where dropdown list will be displayed
• an input (text_field_view) with the specific id “my_input”

We may add some CSS for our dropdown list (check scriptaculous wiki for more information) :

    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;
    }

Activate the autocomplete

Now we must add some javascript to setup the autocompleter.

Add a controller :

And edit the autocomplete.js as following :

    Autocomplete.autocompleteController = SC.Object.create(
    /** @scope Autocomplete.autocompleteController */ {

      // TODO: Add your own code here.
        setAutoComplete: function () {
            new Ajax.Autocompleter("my_input", "autocomplete_choices", "/data.php", 
            {afterUpdateElement : this.getSelectionId.bind(this)});
        },

        getSelectionId: function (text, li) {
            $('input_name').value = li.innerHTML;
        }

    }) ;

And edit the main.js file :

    function main() {

      Autocomplete.server.preload(Autocomplete.FIXTURES) ;
      Autocomplete.autocompleteController.setAutoComplete() ;
      SC.page.awake() ;

    } ;

So we have added two function :

• setAutoComplete is called in main function and will add autocomplete to our field
• getSelectionId will filled the field with the selected element of our dropdown list

Create a simple data provider for the field

We need some data to put in our list. In my example i have created a data.php file with the following code :

<?php

echo "<ul><li>Data1</li><li>Data2</li></ul>";

?>

Really simple :-)

Build and test

That’s the end, build your project and check the result.

Demo page

Ezor.

Sorry for my english, be free to edit to correct this