Using autocomplete from script.aculo.us with sproutcore

Here is a how to use the Ajax.AutoComplete control from script.aculo.us with sproutcore.
[scriptaculous]http://github.com/madrobby/scriptaculous/wikis/ajax-autocompleter

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 :

c[:javascript_libs] = ['/javascript/scriptaculous.js']

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 %>

Ok, we have added :

• 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 :

sc-gen controller autocomplete/autocomplete

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.

sc-build

Demo page
[demopage]http://ezor-web.net/sprouttest/autocomplete/

Ezor.

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