jQuery自动完成JSON引导记号字段

Question

我有一个JSON数据的自动完成，我似乎无法使它与引导记号字段一起工作。根据我的理解，这应该只是将整个事情包装在令牌字段中。或者这是超越了那个东西？

这里是我所在的地方，我相信第二部分是重要的。 正如他们对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; 
      } 
     }); 
    }); 

Answer 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 

现在你需要使用。数据（ '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(); 
    };