태그의 형태로 소스 값 표시

Question

부트 스트랩 태그 입력 플러그인을 사용하고 있습니다. 특정 입력 필드에 태그 형식으로 일부 값을 표시하려고합니다. 이 값은 json 형식의 db에서 찾을 수 있습니다. 나는 문서 https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples 에 나와있는 것처럼 add 메서드를 사용했지만 작동하지 못했습니다.

내 바이올린 데모는 여기에 있습니다 : @Siavas가 언급 한 바와 같이 https://jsfiddle.net/Lh4jy9d4/90/ $('input #expertise').tagsinput('add', {id: 1, text: 'javascript' })

Answer 1

는, 필터링이 마크 업에 따라 정확하지 않았다. 입력 유형에 ID가 있기 때문에 $ ('input #expertise')를 $ ('# expertise')로 변경했습니다.

tagsInput을 초기화하지 않아서 예제가 작동하지 않았습니다. git-hub 예제에 맞게이 작업 스 니펫을 확인하십시오.

 var citynames = new Bloodhound({ 
 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
      prefetch: { 
 
       url: 'https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/citynames.json', 
 
       filter: function (list) { 
 
        return $.map(list, function (cityname) { 
 
         return { name: cityname }; 
 
        }); 
 
       } 
 
      } 
 
     }); 
 
     citynames.initialize(); 
 

 
     $('input').tagsinput({ 
 
      typeaheadjs: { 
 
       name: 'citynames', 
 
       displayKey: 'name', 
 
       valueKey: 'name', 
 
       source: citynames.ttAdapter() 
 
      } 
 
     });

<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="form-group"> 
 
    <label class="col-lg-3 control-label">Expertise</label> 
 
    <div class="col-lg-5"> 
 
     <input type="text" name="cities" id="expertise" class="form-control" /> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label class="col-lg-3 control-label">Interests</label> 
 
    <div class="col-lg-5"> 
 
     <input type="text" name="cities1" id="interests" class="form-control" value="" data-role="tagsinput" /> 
 
    </div> 
 
</div> 
 
    
 

 

 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>