0

我有一个带有 json 数据的自动完成功能，但我似乎无法让它与 Bootstrap 令牌字段一起使用。据我了解，这应该只是将整个东西包装在一个 tokenfield 函数中。或者它是超越的东西？

这是我认为第二部分很重要的地方。正如他们在令牌字段示例http://sliptree.github.io/bootstrap-tokenfield/上所说的那样，这是令牌字段应该实现或“围绕它包装”的地方。我对吗 ？如何使用此代码调用令牌字段？这些信息是否足以让某人帮助我解决这个问题？

    $(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;
            }
        });
    });
4

1 回答 1

1

您首先需要像这样初始化自动完成功能：

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

然后你可以像这样将自动完成包装在 tokenfield 中：

    $("#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

现在您需要使用 .data('bs.tokenfield') 来添加上面列出的自动完成功能。这是我用来选择菜单项的示例：

  $('#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();
     };
于 2017-08-09T18:34:54.197 回答