Tokenfield не позволяет добавлять случайные токены, передавать значения из источника
Я пытался предотвратить добавление токенов, которых нет в источнике. Таким образом, если "оранжевый" был введен, токен не будет создан.
Я искал и нашел что-то близкое, но я не уверен, как передать значения из исходного массива в функцию для проверки значения?
Этот другой " маркерный " проект выглядит интересно, но на данный момент времени очень мало.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body>
<input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
<script type="text/javascript">
$(function () {
$('#tokenfield-typeahead').tokenfield({
autocomplete: {
source: [
{
"id": "1",
"value": "red"
},
{
"id": "2",
"value": "green"
},
{
"id": "3",
"value": "blue"
},
{
"id": "4",
"value": "yellow"
}
],
delay: 100
},
showAutocompleteOnFocus: true
});
//PREVENT DUPLICATION
$('#tokenfield-typeahead').on('tokenfield:createtoken', function (event) {
var existingTokens = $(this).tokenfield('getTokens');
$.each(existingTokens, function(index, token) {
if (token.value === event.attrs.value)
event.preventDefault();
});
});
//ALLOW ONLY TOKENS FROM SOURCE
$('#tokenfield-typeahead').on('tokenfield:createtoken', function (event) {
var exists = false;
$.each(yourSource, function(index, value) {
if (event.attrs.value === value) {
exists = true;
}
});
if(!exists) {
event.preventDefault();
}
});
});
</script>
</body>
</html>