jQuery tag-it 只允许来自自动完成源的标签答案

【问题标题】：jQuery tag-it allow tags only from autocomplete sourcejQuery tag-it 只允许来自自动完成源的标签
【发布时间】：2014-02-13 09:24:02
【问题描述】：

我正在尝试实现一个标记输入，除了我想限制用户只能选择自动完成框中的值。我尝试使用源 json 覆盖 beforeTagAdded 事件并检查标签是否存在在源属性中，但没有运气。

这里是代码，见 beforeTagAdded 函数。

     $(document).ready(function () {
        var itemId;
        var theTags = $('#msg_to');
        theTags.tagit({
            autocomplete: {
                source: [{ id: "1", value: 'David'}, { id: "2", value: 'John' }],
                minLength: 0,
                select: function (event, ui) {
                    itemId = ui.item.id;
                    theTags.tagit("createTag", ui.item.value);
                }
            },
            showAutocompleteOnFocus: true,
            afterTagAdded: function (event, ui) {
                if (itemId) {
                    $(ui.tag).find('input').attr('name', "tag[\'" + itemId + "']['" + ui.tagLabel + "']");
                    itemId = null;
                }
            },
            beforeTagAdded: function (event, ui) {
                var id = ui.autocomplete.source; // not working

           // what to do next?
            }
        })
    });
</script>

提前致谢

【问题讨论】：

标签： jquery tag-it

【解决方案1】：

我的解决方案：

$(function() {     
   var currentlyValidTags = ['ac', 'dc'];
   $('input[name="_tags"]').tagit({
    availableTags: currentlyValidTags,
    autocomplete: { source: function( request, response ) {        
        var filter = removeDiacritics(request.term.toLowerCase());
        response( $.grep(currentlyValidTags, function(element) {
                        return (element.toLowerCase().indexOf(filter) === 0);
                    }));
    }},  
    beforeTagAdded: function(event, ui) {
      if ($.inArray(ui.tagLabel, currentlyValidTags) == -1) {
        return false;
      }
    }          
  });    
});

【讨论】：

【解决方案2】：

有一个分叉的 tag-it 可以做你想做的事：

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

它有一个 requireAutocomplete 设置。

（我不得不合并两个版本，因为我需要每个版本的东西......但希望这会对你有所帮助。）

【讨论】：

谢谢大家，发现用select2比较好用。

【解决方案3】：

以下对我有用：

var currentlyValidTags = [];
$('#tags').tagit({
  autocomplete: {
    source: function(req, resp) {
      search(req, function(data) {
        currentlyValidTags = data;
        resp(data);
      });
    }
  },
  beforeTagAdded: function(event, ui) {
    if (!_.contains(currentlyValidTags, ui.tagLabel)) {
      return false;
    }
  }
});

上述解决方案适用于 65d6fb4dad833bf490f2a7b27063ecd08f792ede 的 2.0 版（与标签 v2.0 上的 2.0 版不同）。

【讨论】：

【解决方案4】：

如果您正在寻找 通过 ajax 自动完成，这里有一个解决方案。

//this will be set true only if fetched via ajax and also selected from autocomplete
$.is_ajax_fetched = false;

在autocomplete 中，您需要这些事件：

select: function( event, ui ) {
$.is_ajax_fetched = true;
return true;
},

//select event will not work alone as tag-it captures event to check for comma and other stuff    
close: function( event, ui ) {
if($.is_ajax_fetched == true){
$('.ui-autocomplete-input').blur();
$('.ui-autocomplete-input').focus();
}
}

现在在 tag-it 调用中，您需要在选项中添加调用事件：

beforeTagAdded: function(event, ui) {
    if($.is_ajax_fetched != true){return false;}
},

afterTagAdded: function(event, ui) {
    $.is_ajax_fetched = false;
},

【讨论】：