sasasa671/jsbin.ulukep.html

## jsbin.ulukep.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    {{autocomplete list=list1}}
  </script>

  <script type="text/x-handlebars" data-template-name="controls/autocomplete">
    <p>{{input type="text" value=view.filter}}</p>
    <ul>
    {{#each view.filteredList}}
      <a href="{{url}}">{{name}}</a>
    {{/each}}
    </ul>
  </script>
</body>
</html>

## jsbin.ulukep.js
App = Ember.Application.create();

var list = [{
  name: "Tom Dale",
  url: "http://www.google.com"
}, {
  name: "Yehuda Katz",
    url: "http://www.google.com"
}, {
  name: "Erik Bryn",
    url: "http://www.google.com"
}];


var model = {
  list1: list
};

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return model;
  }
});

Ember.Handlebars.helper('autocomplete', Ember.View.extend({
  templateName: 'controls/autocomplete',

  filteredList: function() {
    var list = this.get('list'),
        filter = this.get('filter');

    if (!filter) { return list; }

    return list.filter(function(item) {
      return item.name.indexOf(filter) !== -1;
    });
  }.property('list.@each', 'filter')
}));
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
	<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<script type="text/x-handlebars" data-template-name="application">
	{{autocomplete list=list1}}
	</script>

	<script type="text/x-handlebars" data-template-name="controls/autocomplete">
	<p>{{input type="text" value=view.filter}}</p>
	<ul>
	{{#each view.filteredList}}
	<a href="{{url}}">{{name}}</a>
	{{/each}}
	</ul>
	</script>
	</body>
	</html>
	App = Ember.Application.create();

	var list = [{
	name: "Tom Dale",
	url: "http://www.google.com"
	}, {
	name: "Yehuda Katz",
	url: "http://www.google.com"
	}, {
	name: "Erik Bryn",
	url: "http://www.google.com"
	}];


	var model = {
	list1: list
	};

	App.ApplicationRoute = Ember.Route.extend({
	model: function() {
	return model;
	}
	});

	Ember.Handlebars.helper('autocomplete', Ember.View.extend({
	templateName: 'controls/autocomplete',

	filteredList: function() {
	var list = this.get('list'),
	filter = this.get('filter');

	if (!filter) { return list; }

	return list.filter(function(item) {
	return item.name.indexOf(filter) !== -1;
	});
	}.property('list.@each', 'filter')
	}));