1.1.5 • Published 7 years ago
typeahead-tagbox v1.1.5
typeahead-tagbox
Converts an <input> to a typeahead tagbox. Demos
Basic Usage
Javascript:
typeaheadTagbox({
data: [
{"id":1,"text":"Duisburg"},
{"id":2,"text":"Lagonegro"},
{"id":3,"text":"Coquimbo"},
{"id":4,"text":"Kungälv"},
{"id":5,"text":"Brandenburg"},
{"id":6,"text":"Salt Lake City"},
{"id":7,"text":"Pomarolo"},
{"id":8,"text":"Hanau"},
{"id":9,"text":"Kampenhout"},
{"id":10,"text":"Matamata"}
]
});HTML:
<input type="text" name="tags" class="typeahead-tagbox">Options
Basic
| Name | default | type | Comment |
|---|---|---|---|
| caseSensitive | false | Boolean | If the typeahead should check the text case sensitive or not |
| data | [] | Array | required - The data which should be searched |
| dropdownItemTemplate | "{{text}}" | String | The template for the dropdown item. Possible variables: {{text}}, {{id}}, and any additional key you add to the data objects |
| idKey | "id" | String | Key of the data objects, by which the data should be sorted. Can be the same es textKey, but make sure you have no duplicates then |
| inputPlaceholder | "add..." | String | String for the input placeholder |
| minLength | 2 | Integer | Number of chars to be typed befor the search starts |
| selector | ".typeahead-tagbox" | String | Selector for the to be transformed input element |
| tagDeleteButtonContent | "x" | String | Content of the delete button. May be an image tag or svg icon for example |
| tagTemplate | "{{text}}" | String | The template for the tags. Possible variables: {{text}}, {{id}}, and any additional key you add to the data objects |
| textKey | "text" | String | Key of the data objects, which should be displayed in the dropdown and tag |
Classes
| Name | default | type | Comment |
|---|---|---|---|
| dropdownClass | "typeahead-dropdown" | String | The class for the dropdown element |
| dropdownItemClass | "typeahead-dropdown-item" | String | The class for the dropdown item element |
| dropdownSelectedClass | "selected" | String | Class to be added when a dropdown is selected by keyboard arows |
| highlightClass | "typeahead-highlight" | String | Class to be wrapped around the matching substring |
| inputClass | "typeahead-input" | String | Class for the actual input field |
| tagClass | "typeahead-tag" | String | Class for the tags |
| tagRemovingClass | "removing" | String | Class added to the tag befor removing it via keyboard backspace |
| typeaheadClass | "typeahead" | String | Class added to the wrapper of the typeahead |
Callbacks
| Name | default | type | Comment |
|---|---|---|---|
| onAddTag | undefined | undefined / null / Function | Callback to be executed when a tag is added. Parameters: tag which was just added, taglist current list of tags, including the new one |
| onClickDropdownOption | undefined | undefined / null / Function | Callback to be extecuted when an dropdown option is clicked. Parameters: option which was just clicked. Executed before onAddTag. |
| onOpenDropdown | undefined | undefined / null / Function | Callback to be executed when the dropdown is opened to display search results. Parameters: value of the input, optionlist which is displayed in the dropdown |
| onRemoveTag | undefined | undefined / null / Function | Callback to be executed when a tag is removed. Parameters: tag which was removed, taglist without the just removed tag |
Examples
Custom data & dropdown item
typeaheadTagbox({
data: [
{
username: 'jackson',
age: 43,
id: '5c678gh32',
image: 'jackson-avatar.jpg'
},
{
username: 'ferdinand',
age: 23,
id: '5c6jh76a2',
image: 'ferdinand-avatar.jpg'
},
/* more data */
],
textKey: 'username'
dropdownItemTemplate: '<img src="uploads/{{image}}"><strong>{{text}}</strong>({{age}})'
});