Just add data-role="materialtags"
to your input field to automatically change it to a tags input
field.
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo"data-role="materialtags" />
statement | returns |
---|---|
$("input").val() |
|
$("input").materialtags('items') |
|
Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js. An example of using this is shown below.
<input type="text" value="Amsterdam,Washington" data-role="materialtags"/>
<script>
var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'assets/citynames.json',
filter: function(list) {
return $.map(list, function(cityname) {
return { name: cityname };
});
}
}
});
citynames.initialize();
$('input').materialtags({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
</script>
statement | returns |
---|---|
$("input").val() |
|
$("input").materialtags('items') |
|
Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.
<input type="text" />
<script>
var cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'assets/cities.json'
});
cities.initialize();
var elt = $('input');
elt.materialtags({
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
});
elt.materialtags('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
elt.materialtags('add', { "value": 4 , "text": "Washington" , "continent": "America" });
elt.materialtags('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
elt.materialtags('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
elt.materialtags('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });
</script>
statement | returns |
---|---|
$("input").val() |
|
$("input").materialtags('items') |
|