使用Jquery Ui Autocomplete时如何防止Bootstrap Tokenfield重复 [英] How to prevent duplicate with Bootstrap Tokenfield When using Jquery Ui Autocomplete

问题描述

我正在尝试使用Jquery Ui自动完成功能实现 Bootstrap Tokenfield 到目前为止，我能够做到这一点，但事实是我无法防止输入字段中出现重复项，因此，不幸的是，我的用户可以两次选择相同的值.

I am trying to implement Bootstrap Tokenfield with Jquery Ui autocomplete and so far i was able to do that except the fact that i am not able to prevent duplicates in the input field, so, unfortunately my user can choose the same value twice.

在我的搜索中，我发现Bootstrap Tokenfield有一种防止重复的方法.但是，我不知道如何将其应用于代码，因为在我看来，它与Twitter预先输入而不是Jquery Ui一起使用.

In my search i have found that Bootstrap Tokenfield has a way of preventing duplicate. However I do not know how to apply to my code because it looks to me that it goes with Twitter typeahead and not Jquery Ui.

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

How can i prevent duplicate with Bootstrap TokenField Using Jquery Ui autocomplete ?

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

This is my Bootstrap TokenField code based on jquery ui autocomplete

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

And below is what i have found on Github to prevent duplicate though i think it is for 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();
    });
});

推荐答案

我认为您已经完成了所有工作，剩下要做的就是替换类

I think you've done it all, all you are left to do is to replace the class

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

So after the first code, instead of the second code write

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

The difference here is your class that has to be applied and it works both for Twitter Typeahead and Jquery Ui

这篇关于使用Jquery Ui Autocomplete时如何防止Bootstrap Tokenfield重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！