使用Jquery Ui自动完成时如何使用Bootstrap Tokenfield防止重复

Question

我试图用Jquery Ui自动完成实现Bootstrap Tokenfield, 到目前为止我能够做到这一点,除了我无法防止输入字段中的重复,所以,不幸的是我的用户可以选择相同的值两次.

在我的搜索中,我发现Bootstrap Tokenfield有一种防止重复的方法.但是我不知道如何应用于我的代码,因为它在我看来它与Twitter typeahead而不是Jquery Ui.

如何使用Jquery Ui自动完成功能防止使用Bootstrap TokenField重复？

这是我的基于jquery ui自动完成的Bootstrap TokenField代码

$('.tokenfield').tokenfield({
  autocomplete: {
    source: [
    {
        "id": "1",
        "value": "Ferdine Faithfull" 
    },
    {
        "id": "2",
        "value": "John Carta" 
    },
    {
        "id": "3",
        "value": "Mezane Smith" 
    }
    ],

    delay: 100
  },
  showAutocompleteOnFocus: true
});

以下是我在Github上发现的防止重复虽然我认为它适用于Typeahead

$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
    var existingTokens = $(this).tokenfield('getTokens');
    $.each(existingTokens, function(index, token) {
        if (token.value === event.attrs.value)
            event.preventDefault();
    });
});

Answer 1

我认为你已经完成了所有这一切,你要做的就是更换课程

所以在第一个代码之后,而不是第二个代码写

$('.tokenfield').on('tokenfield:createtoken', function (event) {
    var existingTokens = $(this).tokenfield('getTokens');
    $.each(existingTokens, function(index, token) {
        if (token.value === event.attrs.value)
            event.preventDefault();
    });
});

这里的不同之处在于您必须应用的类,它适用于Twitter Typeahead和Jquery Ui