Tags input

Made with love at Neverest hub

Usage

link the javascript and css dependancies to your page

Add the following html to your page section where tags inputs are required

Retrieving values

                let tags = $('#_my_tags_input').tagsValues()
            

Defining a suggestions function

The implementation invokes a function runSuggestions(el,q) on key up. Perform the necessary logic to provide suggestions and append them to the suggestions area.

Suggestions data should be an associative array with the give format and must be assigned to the suggestions variable.

                let json_data = [
                    {"name": "Nairobi","id": 1},
                    {"name": "Mombasa","id": 2},
                    ...
                ]
                _tag_input_suggestions_data = data;

            

Example of a suggestions function using AJAX $.getJSON()

                function runSuggestions(element,query) {

                    /*
                    using ajax to populate suggestions
                     */
                    let sug_area=$(element).parents().eq(2).find('.autocomplete .autocomplete-items');
                    $.getJSON("data.json", function( data ) {
                        //update the data used for suggestions for purpose of retrieval after suggestions click
                        _tag_input_suggestions_data = data;
                        $.each(data,function (key,value) {
                            let template = $("
"+value.name+"
").hide()
                            sug_area.append(template)
                            template.show()

                        })
                    });

                }