Tagit: tag creation restriction for a given ajax list

Question

I am using jquery ui plugin for tags:

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

im has some problems:

• when the user selects from the list, I want to save the identifier and value for this tag.

• create tags only from the list returned by an AJAX call

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

In response to your second question, the Chris Leishman plug in the Tag-It repository contains a new property requireAutocompletethat allows you to use only those items in the autocomplete list as tags.

Here you can find his transfer request: https://github.com/aehlke/tag-it/pull/37

JS : https://github.com/chrisleishman/tag-it

:

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

, , , .

TagIt.js 271, :

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

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

​​, .

, .

, , createTag, labelName ( , , ).

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

, :

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

, :

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

createTag :

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

Answer 2

:

, .

( : -)):

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

createTag

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);

, ,

 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;

    }