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