Heyecan Bootstrap 3 typeahead/Tagsinput tamamlanması iki kez

Question

Düzenleme: Bootstrap typeahead ile Twitter Bootstrap TagsInput kullanıyorum working JSFiddle

eklendi. Kaynağım bir json dosyasıdır, ancak bu alakasız ve statik bir kaynakla kontrol ettim. typeahead ve tagsinput çalışıyoruz

ben girmek sekme veya bir etikete tıklayarak bastığınızda, ancak, yinelenen tam oluşturur. Ben enter tuşuna basın veya typeahead tamamlamak zaman

Extre 'varsayılan' olur o. Eğer yazım kafasını virgülle ayırarak veya pencereden uzaklaşarak koparırsam, bu gerçekleşmez. İşte

girdidir:

<input id="itemCategory" type="text" autocomplete="off" class="tagsInput form-control" name="itemCategory"> 

Ve burada betik: bu benim şans ile tekrarlanabilir olmayacaktır sakat bir şey olduğuna eminim

<script>       
     $('.tagsInput').tagsinput({ 
      confirmKeys: [13, 44], 
      maxTags: 1, 
      typeahead: {     
      source: function(query) { 
       return $.get('listcategories.php'); 
      } 
      } 
     }); 
    </script> 

, bu yüzden' Birinin, böyle bir şeyin gerçekleşmesini sağlayacağını bildikleri bazı kurumsal bilgilere sahip olacağını umuyoruz.

Ek metin, dev içindeki bir görüntü. araçlar:

Herhangi bir öneri veya öneriniz için gerçekten minnettarım. Teşekkür ederim.

KODU @Girish için

Teşekkür ÇALIŞMA şunlar neyi "sabit" Bu konu oldu. Bu noktada jQuery veya Typeahead'in daha yeni bir sürümünde bir yerde tanıtılan bir hata olduğuna inanıyorum. Bu kod, ekstra unsuru el ile kaldırır, ancak umarım bir şey, ilk etapta yerleştirilmesini önlemek için ekstra bir kod ortaya çıkarır. Şimdilik benim için çalışıyor.

 $('.tagsInput').tagsinput({ 
      confirmKeys: [13, 44], 
      maxTags: 1, 
      typeahead: {     
      source: function(query) { 
       return $.get('tags.php'); 
      } 
      } 
     }); 
     $('.tagsInput').on('itemAdded', function(event) { 
      setTimeout(function(){ 
       $(">input[type=text]",".bootstrap-tagsinput").val(""); 
      }, 1); 
     }); 

Answer 1

Ben bu hatayı, işlevi içinde hiçbir şey özel kod bakıyor emin değilim, ama giriş alanına tekrarlanır etiketi seçilen, ancak input alandan seçilen değerini kaldırmak için alternatif bir çözüm, itemAdded olay kullanabilirsiniz , örnek kodun aşağıya bakın.

$('input').tagsinput({ 
    typeahead: { 
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] 
    }, 
    freeInput: true 
}); 
$('input').on('itemAdded', function(event) { 
    setTimeout(function(){ 
     $(">input[type=text]",".bootstrap-tagsinput").val(""); 
    }, 1); 
}); 

Ben de giriş alanı nedeniyle de <selector> gelen giriş elemanı seçmek için gecikme gerekecektir dinamik nesil girişi alanına, etiket giriş alanını hedef olamazdı bu yüzden this veya event her etiket bölümünü oluşturuyor fark etmiş

DEMO

GÜNCELLEME: $.get() işlevieklemek gerekir böylece, xhr nesne değil sunucu yanıtını dönmek olduğunu AJAX yanıtı almak içinyöntemi, örnek koduna bakınız.

$('.tagsInput').tagsinput({ 
     confirmKeys: [13, 44], 
     maxTags: 1, 
     typeahead: {     
      source: function(query) { 
      return $.get('listcategories.php').done(function(data){ 
       /*if you have add `content-type: application/json` in 
       server response then no need to parse JSON otherwise, 
       you will need to parse response into JSON.*/ 
       return $.parseJSON(data); 
      }) 
      } 
     } 
});