使用带有Tagit的jQuery UI自动完成功能

Question

我正在尝试使用Tagit插件来处理我拥有的jQuery自动填充字段。

自动完成字段从远程数据源拉取以从wordpress获取标记。自动完成功能可以很好地完成，因为您输入时会显示关键字的建议。

我认为安装Tagit只会采用与jQuery UI插件相同的属性，因此仍然会通过AJAX建议关键字。

有谁知道如何使这个工作？

我原来的jQuery UI代码是：

function split( val ) {
    return val.split( /,\s*/ );
}

function extractLast( term ) {
    return split( term ).pop();
}

$('.sub-category-input').change(function() {
    $(this).next().val($(this).val());
});

$('.sub-category-input')
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) {
            event.preventDefault();
        }
     })
    .autocomplete({
        _resizeMenu: function() {
            this.menu.element.outerWidth(300);
        },
        source: function( request, response ) {
             $('.searching').show();
             $.getJSON( "/wp-content/themes/woa-2014/sub-cats.php", {
                 term: extractLast( request.term )
             }, response );
        },
        search: function() {
             // custom minLength
             var term = extractLast( this.value );
             if ( term.length < 2 ) {
                 return false;
             }
        },
        focus: function() {
             // prevent value inserted on focus
             return false;
        },
        response: function( event, ui ) {
              $('.searching').hide();
        },
        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( ", " );
              $("#what").val(terms.join( ", " ));

              return false;
        },
    });

Tagit的代码很简单：

$(".sub-category-input").tagit({
     removeConfirmation: true,
     allowSpaces: true
 });