Creates a slug in one HTML form element based on a value in another. The relationship is unidirectional in the sense that changes made to the source element affect the target element, but not vice versa.
JavaScript Required
Script `slugger.js` must be included.
Usage
Data-API
To make this component function there must be two HTML form elements. One is the source where the user types text and the other is the target where the slugger dynamically generates the slug.
Two attributes have to be defined on the source element:
data-toggle="slugger"
indicates that the element’s value will be used as the string from which the slug is to be generated.data-slugger-target="#id-of-the-target-element"
defines the jQuery selector of the HTML form element where the generated slug is to be displayed.
JavaScript
Options
Name | Type | Default | Description |
---|---|---|---|
target | jQuery HTML element collection | The element(s) where the slug should be displayed |
Methods
$().updateSlug()
Sets slug generated as the value of the target element based on the value of the source element.
Events
Event Type | Description |
---|---|
updated.bui.slugger | Fired when user changes the value of the source element and the slug gets updated. |
changed.bui.slugger | Fired when the source element loses focus after a change. |
Example
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Source</label>
<input type="text" class="form-control" data-toggle="slugger" data-slugger-target="#slugger-target" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Target</label>
<input type="text" class="form-control" id="slugger-target" />
</div>
</div>
</div>