backbone example

backbone_example.html

<h1>Find Users</h1>
<form action="find" method="get">
  <input type="text" placeholder="Enter Name" id="user-input"/>
</form>
<div id="user-selection" style="margin-top:10px;"></div>

<script>
  $(function() {
    var User = Backbone.Model.extend({});

    var UserList = Backbone.Collection.extend({
      model: User,
      url: '/users.json',
      parse: function(response) {
        return response;
      }
    });

    var SelectionView = Backbone.View.extend({
      render: function() {
        $('#user-selection').html(($(this.el).html("You Selected : " + this.model.get('name'))));
        return this;
      },
    });

    var users = new UserList();
    users.fetch({async: false});
    var userNames = users.pluck("name");

    $("#user-input").autocomplete({
      source : userNames,
      minLength : 2,
      select: function(event, ui){
        var selectedModel = users.where({name: ui.item.value})[0];
        var view = new SelectionView({model: selectedModel});
        view.render();
      }
    });
  });
</script>