backbone.typeahead.js
Version:
A Bootstrap inspired Typeahead for Backbone.js
50 lines (46 loc) • 1.36 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Backbone.Typeahead Example</title>
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div id="main" class="container">
<div class="row">
<h3>Basic</h3>
<div id="basic" class="col-lg-4 col-sm-6"></div>
</div>
<div class="row">
<h3>Collection</h3>
<div id="collection" class="col-lg-4 col-sm-6"></div>
</div>
</div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/backbone/backbone.js"></script>
<script src="../backbone.typeahead.js"></script>
<script type="text/javascript">
$(function() {
var states = [
{name: 'Nevada'},
{name: 'Alabama'},
{name: 'Michigan'},
{name: 'Minnesota'},
{name: 'Ohio'},
{name: 'New York'},
];
var basic = new Backbone.Typeahead(states);
basic.setElement('#basic').render();
var Alpha = Backbone.Collection.extend({
comparator: function(model) {
return model.get('name');
}
})
var alpha = new Alpha(states);
var customCollection = new Backbone.Typeahead({collection: alpha});
customCollection.setElement('#collection').render();
});
</script>
</body>
</html>