자동 완성 및 선행 기입으로 부트 스트랩 3 토큰 필드를 어떻게 사용해야합니까?

Twitter Typeahead 예를 사용하여 http://sliptree.github.io/bootstrap-tokenfield/의 예제를 재현 해 보았습니다. 나는 원래의 코드를 최소한으로 수정했다.자동 완성 및 선행 기입으로 부트 스트랩 3 토큰 필드를 어떻게 사용해야합니까?

<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/bloodhound.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"></link> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css"></link> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css"></link> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"></link> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></link> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/theme.css"></link> 
 
</head> 
 

 
<body> 
 

 
<input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" /> 
 

 
<script> 
 
var engine = new Bloodhound({ 
 
    local: [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}], 
 
    datumTokenizer: function(d) { 
 
    return Bloodhound.tokenizers.whitespace(d.value); 
 
    }, 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace 
 
}); 
 

 
engine.initialize(); 
 

 
$('#tokenfield-typeahead').tokenfield({ 
 
    typeahead: [null, { source: engine.ttAdapter() }] 
 
}); 
 
</script> 
 

 
</body> 
 

 
</html>

내 문제는 자동 완성의 스타일과 앞서 입력 누락 된 것입니다. (나는 이물 패키지와 버전이 있지만, 동일한 결과를.)

나는

트위터 선행 입력없이 기본 스타일과 함께 제공으로 간주했다. 귀하의 페이지에 tokenfield-typeahead.css를 포함 시키십시오.

문장의 문장이 있지만 여기에 언급 된 CSS 파일이 포함되어 있습니다.

적절한 자동 완성과 사전 입력 스타일링을 위해 수정해야 할 사항은 무엇입니까?

출처

2017-04-15 Imre Piller

정확하게 포함 된 typeahead.js 버전이 문제였습니다. 이 아니라 0.10.1과 작동합니다. 0.10.1으로 다운 그레이드하면 문제가 해결됩니다.

<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> 
 
</head> 
 
<body> 
 
    <input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" /> 
 

 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script> 
 
    <script type="text/javascript"> 
 
     $(function() { 
 
      var engine = new Bloodhound({ 
 
       local: [{ 
 
        value: 'red' 
 
       }, { 
 
        value: 'blue' 
 
       }, { 
 
        value: 'green' 
 
       }, { 
 
        value: 'yellow' 
 
       }, { 
 
        value: 'violet' 
 
       }, { 
 
        value: 'brown' 
 
       }, { 
 
        value: 'purple' 
 
       }, { 
 
        value: 'black' 
 
       }, { 
 
        value: 'white' 
 
       }], 
 
       datumTokenizer: function(d) { 
 
        return Bloodhound.tokenizers.whitespace(d.value); 
 
       }, 
 
       queryTokenizer: Bloodhound.tokenizers.whitespace 
 
      }); 
 

 
      engine.initialize(); 
 

 
      $('#tokenfield-typeahead').tokenfield({ 
 
       typeahead: [null, { 
 
        source: engine.ttAdapter() 
 
       }] 
 
      }); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

출처

2017-04-19 14:23:31 meskobalazs

자동 완성 및 선행 기입으로 부트 스트랩 3 토큰 필드를 어떻게 사용해야합니까?

답변

관련 문제