jquery autocomplete json이있는 부트 스트랩 토큰 필드

Question

json 데이터가있는 자동 완성 기능이있어서 부트 스트랩 토큰 필드와 함께 사용할 수있는 것처럼 보입니다. 내가 이해하는 바로는 이것은 토큰 필드 함수로 전체를 래핑하는 것입니다. 아니면 그 이상입니까?

두 번째 부분이 중요하다고 여기는 부분이 있습니다. 토큰 필드에 대한 예제에서 http://sliptree.github.io/bootstrap-tokenfield/은 tokenfield가 구현되거나 "감싸 져야"하는 곳입니다. 내가 맞습니까? 이 코드를 사용하여 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").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를 사용해야합니다 :

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

그런 다음이 같은 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(); 
    };