File size: 3.79Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="../../dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="../../dist/css/flat-ui.css" rel="stylesheet">
<link rel="shortcut icon" href="../../dist/img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="../../dist/js/vendor/html5shiv.js"></script>
<script src="../../dist/js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h4>Tagsinput</h4>
<div class="row">
<div class="col-md-7 mtl">
<h5 class="demo-panel-title">Tags Input</h5>
<input name="tagsinput-01" class="tagsinput" value="Clean, Fresh, Modern, Unique" />
<h5 class="demo-panel-title">Tags Input Primary with typeahead functionality</h5>
<div class="tagsinput-primary">
<input name="tagsinput-02" class="tagsinput tagsinput-typeahead input-lg" value="Alabama"/>
</div>
<h5 class="demo-panel-title">Typeahead only</h5>
<div class="form-group">
<input class="form-control typeahead-only input-lg" type="text" id="typeahead-demo-01" />
</div>
<h5 class="demo-panel-title">Typeahead with feedback icons</h5>
<p>Huge</p>
<div class="form-group">
<input class="form-control typeahead-only input-hg" type="text" id="typeahead-demo-01" />
<span class="form-control-feedback control-feedback-hg fui-location"></span>
</div>
<p>Default</p>
<div class="form-group">
<input class="form-control typeahead-only" type="text" id="typeahead-demo-01" />
<span class="form-control-feedback fui-location"></span>
</div>
<p>Large</p>
<div class="form-group">
<input class="form-control typeahead-only input-lg" type="text" id="typeahead-demo-01" />
<span class="form-control-feedback control-feedback-lg fui-location"></span>
</div>
<p>Small</p>
<div class="form-group">
<input class="form-control typeahead-only input-sm" type="text" id="typeahead-demo-01" />
<span class="form-control-feedback control-feedback-sm fui-location"></span>
</div>
</div> <!-- /tags -->
</div><!-- /.row -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../dist/js/vendor/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../dist/js/flat-ui.js"></script>
<script src="../assets/js/application.js"></script>
<script>
var states = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.word); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 4,
local: [
{ word: "Alabama" },
{ word: "Alaska" },
{ word: "Arizona" },
{ word: "Arkansas" },
{ word: "California" },
{ word: "Colorado" }
]
});
states.initialize();
$('input.tagsinput').tagsinput();
$('input.tagsinput-typeahead').tagsinput('input').typeahead(null, {
name: 'states',
displayKey: 'word',
source: states.ttAdapter()
});
$('input.typeahead-only').typeahead(null, {
name: 'states',
displayKey: 'word',
source: states.ttAdapter()
});
</script>
</body>
</html>