Select2 4.0.3 - Создайте новый тег, если нет результатов

Я использую Select2 с ajax и автозаполнением. У меня проблема, когда я печатаю то, что не существует. в первом примере, я ищу «fr», чтобы увидеть результаты, и тег автоматически создается! если я пытаюсь набрать больше символов, я не могу, потому что у меня есть ограничение на 1 тег ... Я нажимаю кнопку «Очистить», и мне нужно писать быстро, тэг создан, но автозаполнение остается ...Select2 4.0.3 - Создайте новый тег, если нет результатов

Test with basic code

$(document).ready(function() { 
 
    // example of data: https://api.myjson.com/bins/m0x8 
 
    $("#marques").select2({ 
 
\t ajax: { 
 
\t \t url: "/ajax/acmarques", 
 
\t \t dataType: 'json', 
 
\t \t delay: 250, // or 600, same result 
 
\t \t processResults: function (data) { 
 
\t \t \t return { 
 
\t \t \t \t results: data 
 
\t \t \t }; 
 
\t \t }, 
 
\t }, 
 
\t escapeMarkup: function(m) { 
 
\t \t return m; 
 
\t }, 
 

 
\t createTag: function(item) { 
 
     return { 
 
      id: item.term, 
 
      text: item.term, 
 
     }; 
 
    }, 
 
\t maximumSelectionLength: 1, // only 1 tag is possible 
 
\t tags: true, 
 
\t //language: "fr", 
 
\t allowClear: true, 
 
\t placeholder: "Indiquez la marque de la croquette." 
 
}); 
 
    
 
    });

#marques { 
 
    width: 300px; 
 
    }

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
    
 
</head> 
 
<body> 
 

 
<div> 
 
<label for="marques">select2 with ajax/autocomplete</label><select id="marques"></select> 
 
</div> 
 
    
 
</body> 
 
</html>

второй скринкаст лучше, но я не могу "проверить" новый тег, который не существует. Я думаю, что лучший способ - поймать ключ ENTER/TAB с помощью этого небольшого кода в createTag.

Test with createtag return null

createTag: function(item) { 
// Don't offset to create a tag if there is no @ symbol 
if (item.term.indexOf('@') === -1) { 
    // Return null to disable tag creation 
    return null; 
} 
    return { 
     id: item.term, 
     text: item.term, 
    }; 
},

У вас есть идея, чтобы решить мою проблему? Я пытаюсь найти множество вещей в github и stackoverflow, но часто для старых версий select2.

Большое спасибо

источник

2016-09-30 Damien D.

может быть, это неправильно, но это работает:

$(document).ready(function() { 
 
    var currentSelectId = null; 
 
    // example of data: https://api.myjson.com/bins/m0x8 
 
    $("#marques").select2({ 
 
\t ajax: { 
 
\t \t url: "/ajax/acmarques", 
 
\t \t dataType: 'json', 
 
\t \t delay: 250, // or 600, same result 
 
\t \t processResults: function (data) { 
 
\t \t $(".select2-selection").on('focus', function (e) { 
 
\t \t \t e.preventDefault(); // maybe useless 
 
\t \t \t currentSelectId = $(this).closest('div').find('select').attr('id'); 
 
\t \t }); 
 
\t \t \t return { 
 
\t \t \t \t results: data 
 
\t \t \t }; 
 
\t \t }, 
 
\t }, 
 
\t escapeMarkup: function(m) { 
 
\t \t return m; 
 
\t }, 
 

 
\t createTag: function(item) { 
 
     // select2-search__field is the class of the input who appears when you have the search field 
 
\t $('.select2-search__field').bind('keyup', function (e) { 
 
\t \t var code = (e.keyCode ? e.keyCode : e.which); 
 
\t \t if (code==13) { // ENTER (TAB doesn't work with code==9, i'll looking for that later 
 
\t \t  var valSearch = $(this).val(); 
 
\t \t  //console.log("current select ID:"+currentSelectId); 
 
\t \t  $("#"+currentSelectId).prepend("<option value='"+valSearch+"' selected>"+valSearch+"</option>"); 
 
\t \t \t $("#"+currentSelectId).trigger('change'); 
 
\t \t \t $("#"+currentSelectId).select2('close'); 
 
\t \t \t currentSelectId = null; // reinit 
 
\t \t } 
 
\t }); 
 
    // Don't offset to create a tag if there is no @ symbol 
 
    if (item.term.indexOf('@') === -1) { 
 
     // Return null to disable tag creation 
 
     return null; 
 
    } 
 
     return { 
 
      id: item.term, 
 
      text: item.term, 
 
     }; 
 
    }, 
 
\t maximumSelectionLength: 1, // only 1 tag is possible 
 
\t tags: true, 
 
\t //language: "fr", 
 
\t allowClear: true, 
 
\t placeholder: "Indiquez la marque de la croquette." 
 
}); 
 
    
 
    });

источник

2016-10-01 10:05:08

Select2 4.0.3 - Создайте новый тег, если нет результатов

ответ

Смежные вопросы