Tagrhead is a search bar that comes with autosuggestions and tags features, and supports Google's Material Design Lite and Bootstrap Material Design
- Installation
- CDN
- Basic Usage
- Material Design Lite
- Bootstrap Material Design
- Public APIs
- Configurations
You can install Tagrhead using npm or bower:
- npm:
npm install tagrhead - bower:
bower install tagrhead
Since Tagrhead uses Typeahead's Bloodhound as its suggestion engine, which needs jQuery, make sure you have jQuery installed first. However, a bundled version of Tagrhead with a built-in is also available, but its file size is comparably larger.
You can also include this library in your project using CDN:
- Javascript:
- CSS:
Give you input element and container a unique id, then initialize Tagrhead with your dataSource:
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagrhead@2/dist/stylesheets/tagrhead.basic.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tagrhead@2/dist/Tagrhead.min.js"></script>
<script type="text/javascript">
let dataSources = [
{
itemHeader: 'TV Shows',
itemKey: 'id',
itemValue: 'show',
mode: 'local', // can be 'remote', 'prefetch', will be supported later
srchKey: 'show',
defaultSuggestions: true,
data: [
{id: 1, show: 'Rick and Morty'},
{id: 2, show: 'How I Met Your Mother'},
{id: 3, show: 'Unbreakable Kimmy Schimidtt'},
{id: 4, show: 'Scrubs'},
{id: 5, show: 'Brooklyn Nine Nine'}
]
}
]
window.onload = () => {
var tagrhead = new Tagrhead('tagrhead-input', 'tagrhead-container', dataSources, {
manual: false,
wrap: true
})
}
</script>
<body>
<div id="tagrhead-container">
<input id="tagrhead-input" type="text" name="" value="">
</div>
<!-- OR -->
<input id="tagrhead-input" type="text" name="" value="">
<div id="tagrhead-container"></div>
</body>
</head><head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagrhead@2/dist/stylesheets/tagrhead.material.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tagrhead@2/dist/Tagrhead.min.js"></script>
<script type="text/javascript">
let dataSources = [...]
window.onload = () => {
var tagrhead = new Tagrhead('tagrhead-input', 'tagrhead-container', dataSources, {
manual: false,
wrap: true,
style: 'mdl'
})
}
</script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<div class="tagrhead-mdl-search-form" search-placeholder="Search">
<div id="tagrhead-container"></div>
<div class="tagrhead-mdl-searchbox">
<div class="tagrhead-mdl-search-image material-icons"></div>
<input id="tagrhead-input" placeholder="Search" type="text" class="tagrhead-mdl-search-field tagrhead-mdl-search-query" autocomplete="off">
</div>
</div>
</div>
</header>
</div>
</body><head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tagrhead@2/dist/stylesheets/tagrhead.bdl.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tagrhead@2/dist/Tagrhead.min.js"></script>
<script type="text/javascript">
let dataSources = [...]
window.onload = () => {
var tagrhead = new Tagrhead('tagrhead-input', 'tagrhead-container', dataSources, {
manual: false,
wrap: false,
style: 'bootstrap-material-design'
})
}
</script>
</head>
<body>
<div class="navbar navbar-default">
...
<div class="navbar-collapse collapse navbar-responsive-collapse">
...
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8 tagrhead-input" placeholder="Search" id="tagrhead-input">
</form>
...
</div>
<div id="tagrhead-container" class="navbar-collapse collapse navbar-material-light-blue-collapse">
</div>
</div>
...
</body>new Tagrhead(inputId, containerId, dataSources, config)Tagrhead.getTags()Tagrhead.clearTags()Tagrhead.addTags(data)
The constructor function. It takes the id of the input element, the id of the container, data sources and an config as its arguments. The config argument is optional.
var tagrhead = new Tagrhead('tagrhead-input', 'tagrhead-container', dataSources, {
manual: false,
wrap: true
})Returns the current tags stored in an array.
var tags = tagrhead.getTags()Clear all the current tags.
tagrhead.clearTags()
console.log(tagrhead.getTags()) // []Takes an object or an array of objects and add them to the current tags.
tagrhead.addTags({
header: 'header name',
key: 'id_val',
value: 'value_val'
})
var arr = [
{
header: 'header name',
key: 'id_val1',
value: 'value_val1'
},
{
header: 'header name',
key: 'id_val2',
value: 'value_val2'
},
{
header: 'header name2',
key: 'id_val3',
value: 'value_val3'
}
]
tagrhead.addTags(arr)When instantiating tagrhead, there are a number of options you can configure.
manual- Defaults to befalse. It set to true, the user can add whatever they type on the search bar as a tag with the enter key. The tag' sheader,key,valueare all set to the text input.wrap- Defaults to betrue. Tagrhead adds all the tags inside the container and ifwrapis set to betrue, it assumes you've put theinput elementinside thecontainer. If set tofalse, you have to take theinput elementoutside of of thecontainer.style- Tagrhead can add tags that supports both Material Design Lite and Bootstrap Material Design. Specify whichstyleyou want withmdlorbootstrap-material-design. If none is set, Tagrhead will just create a basic tag.
The data source is an array of data you want Tagrhead to do autosuggestion from with a number of options you can configure.
itemHeader- The header or category name you want to give to the array of dataitemKey- The unique key for find the element inside your dataitemValue- The value/text you want to show on the autosuggestion listsrchKey- The property inside yourdatathat you want the search to be based ondefaultSuggestions- Whether you want to give some random suggestions if the search bar is empty (not counting the prefix)data- the array that stores your data, in which each object should contains at least one property (band, for instance, in the example)
Example:
var dataSource = [
{
itemHeader: 'Bands',
itemKey: 'id',
itemValue: 'band',
srchKey: 'band',
defaultSuggestions: true,
data: [
{id: 1, band: 'Chvrches'}, {id: 2, band: 'Linkin Park'}, {id: 3, band: 'Green Day'},
{id: 4, band: 'Muse'}, {id: 5, band: 'Sum 41'}, {id: 6, band: 'Death Cab For Cutie'},
{id: 7, band: 'Twenty One Pilots'}, {id: 8, band: 'Oasis'}, {id: 9, band: 'Beatles'},
{id: 10, band: 'Gorillaz'}, {id: 11, band: 'Radiohead'}, {id: 12, band: 'Coldplay'},
{id: 13, band: 'Evanescence'}, {id: 14, band: 'Fall Out Boy'}, {id: 15, band: 'Fort Minor'},
{id: 16, band: 'Florence + The Machine'}, {id: 17, band: 'Foo Fighters'}, {id: 18, band: 'The Glitch Mob'},
{id: 19, band: 'Daft Punk'}, {id: 20, band: 'Clean Bandit'}, {id: 21, band: 'AWOLNATION'},
{id: 22, band: 'Bon Jovi'}, {id: 23, band: 'Arcade Fire'}, {id: 24, band: 'Avenged Sevenfold'},
{id: 25, band: 'Aerosmith'}, {id: 26, band: 'AC/DC'}, {id: 27, band: 'HaleStorm'},
{id: 28, band: 'Straight Outta Compton'}, {id: 29, band: 'Lady Antebellum'}, {id: 30, state: 'M83'}
]
}
]