tagit: hạn chế sự sáng tạo tag vào danh sách do ajax

Question

tôi đang sử dụng một plugin jquery ui cho gắn thẻ:

https://github.com/aehlke/tag-it

im có một vài vấn đề:

1. khi một người sử dụng chọn từ danh sách, tôi muốn lưu id và giá trị cho thẻ đó.

2. chỉ tạo ra các thẻ từ danh sách mang về bởi AJAX gọi

   $(function() { 
       $('#tags').tagit({tagSource:function(request, response) { 
   $.ajax({ 
   type:"GET", 
   url: "http://some_link", 
   dataType: "jsonp", 
   data:{ 
       term:request.term, 
       }, 
       success: function(data) { 
        response($.map(data, function(item) { 
         return { 
          label: item.label, 
          value: item.value, 
          id:item.id 
         }; 
        })); 
       } 
       }); 
   } 
   , triggerKeys: ['enter', 'comma', 'tab']}); 
   }); 
   

Answer 1

Trong câu trả lời cho cái nĩa của kho Tag-It câu hỏi thứ hai của bạn Chris Leishman chứa một tài sản mới requireAutocomplete mà chỉ cho phép các mục trong danh sách tự động điền được sử dụng làm thẻ.

Bạn có thể tìm theo yêu cầu kéo của mình ở đây: https://github.com/aehlke/tag-it/pull/37

Tải về phiên bản này của các tập tin JS từ: https://github.com/chrisleishman/tag-it

và sử dụng nó như một tài sản thông thường:

$(selector).tagit({ 
     requireAutocomplete: true, 
     tagSource: [...] 
}); 

Đối với lần đầu tiên của bạn câu hỏi, tôi đang làm việc trên này bản thân mình vì vậy tôi sẽ cập nhật câu trả lời của tôi khi tôi đã tìm thấy một giải pháp.

Tôi đã thực hiện một sửa đổi TagIt.js địa phương của riêng tôi tại dòng 271 thay đổi:

var tag = that.createTag(ui.item.value); 

để

var tag = that.createTag(ui.item.label); 

mà cố định vấn đề này, theo đó các Id của các mặt hàng cho thấy thay vì nhãn sau khi chọn một tùy chọn từ danh sách tự động hoàn tất.

Cập nhật

Dưới đây là một số thông tin về làm thế nào để lưu các ID của mỗi thẻ.

Điều đầu tiên tôi đã làm là ghi đè phương thức createTag để bao gồm tham số labelName (bạn có thể sửa đổi origional nếu muốn, tôi chỉ thích ghi đè nó).

$.ui.tagit.prototype.createTag = function (labelName, value, additionalClass) { 
// The origional code from createTag here 
} 

Trim các labelName trong cùng một cách mà các giá trị param hiện được tỉa:

value = $.trim(value); 
labelName = $.trim(labelName) 

Thay đổi biến nhãn để sử dụng labelName mới:

var label = $(this.options.onTagClicked ? 
     '<a class="tagit-label"></a>' : 
     '<span class="tagit-label"></span>').text(labelName); 

Trong phần autocomplete của nguồn gốc tôi thay đổi cuộc gọi thành createTag để bao gồm nhãn mới:

var tag = that.createTag(ui.item.label, ui.item.value); 

Answer 2

giải pháp này là để xử lý nhiều giá trị và câu trả lời cho câu hỏi:

khi người dùng chọn từ danh sách, tôi muốn lưu id và giá trị cho thẻ đó.

của nó lấy cảm hứng từ giải pháp trên (do đó bạn sẽ cần phải đọc rằng: -)):

var tag = that.createTag(ui.item); // since ui.item will have everything, label, value, id and other things 

sau đó trong createTag chức năng

var item = value; 
value = item.value; 
... 
var tag = $('<li></li>') 
      .data('tag_item_data',item)// add this line 
      .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all') 
      .addClass(additionalClass) 
      .append(label); 

bây giờ để lấy các thẻ, chỉ cần tạo một hàm

assignedTagsData : function(){ 
     // Only to be used when singleField option is not seletced 
     var tags = []; 

     this.tagList.children('.tagit-choice').each(function() { 
       tags.push($(this).data('tag_item_data')); 
      }); 
     return tags; 

    }