Bootstrap tokenfield with jquery autocomplete json

Question

I have an autocomplete with json data and i cant seem to make it work with Bootstrap tokenfield. From what I understand this should be just about wrapping the whole thing in a tokenfield function. Or is it something beyond that ?

Here is what I have where I believe the second part is important. As they say on tokenfield examples http://sliptree.github.io/bootstrap-tokenfield/ this is where tokenfield should be implemented or "wrapped around it". Am I right ? How can I call the tokenfield using this code? Is this information sufficient enough for someone to help me out with this ?

    $(function() {
        function split( val ) {
            return val.split( / \s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }
        // don't navigate away from the field on tab when selecting an item
        $( "#s" ).bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
        }
    })

        $('#s').autocomplete({
            source: function( request, response ) {
                $.getJSON( "<?= base_url(); ?>keyword/search_json", {
                    term: extractLast( request.term )
                }, response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 1 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
            }
        });
    });

score 1 · Answer 1 · answered Aug 09 '17 at 18:34

You first need to initialize autocomplete like this:

    $("#input-search-bar").autocomplete({
        minLength: 3
    });

Then you can wrap the the autocomplete in tokenfield like this:

    $("#input-search-bar").tokenfield({
        autocomplete: {
            source: function(request, response) {
                    getTerms(request, response, searchType);
                }
            },
            minLength: 3,
            closeOnSelect: false,
            updateElement: false
        },
        showAutocompleteOnFocus: false
        createTokensOnBlur: false
    }).on('tokenfield:createtoken', function(event) {
        // add code here if you like
    }).on('tokenfield:createdtoken', function(event) {
        // add code here if you like        
    }).on('tokenfield:removedtoken', function(event) {
        // add code here if you like        
    }); //end of tokenfield

Now you need to use .data('bs.tokenfield') to tack on the autocomplete functions you have listed above. Here's an example of one I used to select menu items:

  $('#input-search-bar')
     .data('bs.tokenfield')
     .$input
     .data('ui-autocomplete')['menu.options.selected'] = function(event, ui) {
       var item = ui.item.data("item.autocomplete");
       autocompleteMenu.focus();
     };

Bootstrap tokenfield with jquery autocomplete json

1 Answers1