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}})'
});