Twitter Bootstrap 3 Typeahead/Tagsinput Hoàn Twice

Question

Chỉnh sửa: Thêm working JSFiddle

Tôi đang sử dụng Twitter Bootstrap TagsInput với Bootstrap Typeahead. Nguồn của tôi là một tệp json, nhưng đó là không liên quan, và tôi đã kiểm tra với một nguồn tĩnh.

Các typeahead và tagsinput đang làm việc, tuy nhiên khi tôi nhấn enter, tab, hoặc nhấp chuột vào một thẻ, nó tạo ra một bản sao hoàn chỉnh.

Đó extre 'mặc định' xảy ra bất cứ khi nào tôi nhấn enter, hoặc hoàn thành typeahead. Nếu tôi phá vỡ các typeahead bằng cách tách bằng dấu phẩy, hoặc lấy tập trung ra khỏi cửa sổ, nó không xảy ra.

Dưới đây là đầu vào:

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

Và đây là kịch bản:

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

tôi chắc chắn rằng đó là một cái gì đó rung rinh đó sẽ không reproducable, với may mắn của tôi, vì vậy tôi m hy vọng ai đó sẽ có một số kiến ​​thức thể chế mà họ biết sẽ gây ra một cái gì đó như thế này xảy ra.

Đây là hình ảnh của văn bản bổ sung, trong dev. công cụ:

Tôi thực sự đánh giá cao bất kỳ lời khuyên hoặc đề xuất nào. Cảm ơn bạn.

LÀM VIỆC MÃ

Nhờ @Girish, sau đây là những gì "cố định" vấn đề này. Tôi tin rằng nó là một lỗi vào thời điểm này, được giới thiệu ở đâu đó trong một phiên bản mới hơn của jQuery hoặc Typeahead. Mã này chỉ cần loại bỏ thủ công phần tử thừa, mặc dù hy vọng một cái gì đó sẽ đi cùng để ngăn chặn nó được đặt ở đó ngay từ đầu, loại bỏ mã phụ. Bây giờ nó hoạt động cho tôi.

 $('.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

Tôi không chắc chắn này đang tìm kiếm lỗi, không có gì bên trong mã tùy chỉnh chức năng, nhưng chọn thẻ được lặp lại trong lĩnh vực đầu vào, nhưng bạn có thể sử dụng giải pháp thay thế, itemAdded kiện để loại bỏ giá trị được lựa chọn từ input lĩnh vực , xem bên dưới mã mẫu.

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

Tôi cũng đã nhận thấy trường nhập được tạo ra mỗi phần thẻ để this hoặc event không thể được nhắm mục tiêu lĩnh vực đầu vào thẻ, do lĩnh vực đầu vào thế hệ năng động, bạn cũng sẽ cần phải trì hoãn để chọn yếu tố đầu vào từ <selector>

DEMO

CẬP NHẬT: $.get() chức năng là trở xhr đối tượng không đáp ứng máy chủ, do đó bạn cần thêm callback phương pháp để có được phản ứng AJAX, xem bên dưới mã mẫu.

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