backbone.typeahead.js
Version:
A Bootstrap inspired Typeahead for Backbone.js
61 lines (55 loc) • 1.76 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>Different Template</h3>
<div id="basic" class="col-lg-4 col-sm-6"></div>
</div>
<div class="row">
<h3>Template Variables</h3>
<div id="variables" 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">
var states = [
{name: 'Nevada'},
{name: 'Alabama'},
{name: 'Michigan'},
{name: 'Minnesota'},
{name: 'Ohio'},
{name: 'New York'},
];
var Extended = Backbone.Typeahead.extend({
template: '<input type="text" class="form-control" placeholder="Find a State!"><ul class="dropdown-menu"></ul>',
});
var Variables = Backbone.Typeahead.extend({
template: _.template('<input type="text" class="form-control" placeholder="<%- placeholder %>" /><ul class="dropdown-menu"></ul>'),
render: function() {
this.$el.html(this.template({
placeholder: this.options.placeholder,
}));
// Don't forget these!
this.$menu = this.$('ul');
this.$input = this.$('input');
return this;
}
});
$(function() {
var basic = new Extended(states);
basic.setElement('#basic').render();
var v = new Variables(states, {placeholder: "Custom Placeholder"});
v.setElement('#variables').render();
});
</script>
</body>
</html>