Я попробовал несколько решений, приведенных здесь и в других местах, однако ни одно из них не сработало в selected.js 1.8.5 (jQuery: 3.3.1), и поэтому я получил следующее, поскольку не хотел использовать форк, который может не всегда быть в курсе главной ветки:
Для случая, когда я не хочу, чтобы какой-либо .chosen-select
позволял новые значения, я добавил новый класс .chosen-newValuesAllowed
. Я установил обработчик событий для этого класса, где CTRL + I добавляет новое значение, если его еще нет. Фокус на поле ввода впоследствии не теряется. В моем примере я проверяю innerHTML, поскольку @value фактически содержит идентификаторы базы данных, и поэтому новое значение, которое является строкой в моем примере, которое будет обработано сервером позже, никогда не будет найдено в @value. Если вы хотите проверить @value, посмотрите комментарий внутри фрагмента.
Код обрабатывает одиночный и множественный выбор.
$(document).on("keydown", ".chosen-container.chosen-newValuesAllowed input", function(e) {
if (e.ctrlKey === true && e.keyCode === 73) { // CTRL + I
e.preventDefault();
var newValue = $(this).val();
if (newValue) {
try {
// only add if there is no option having the content/text of "input" yet!
// instead of filter() for the content of <option> you can check on its @value by: find("option[val='...']")
var $selectElement = $(e.target).closest("div.chosen-container").prev(); // the previous sibling should be the <select>. If not, grab it some other way, e.g. via @id
if (!$selectElement.find("option").filter(function () { return $(this).html() === newValue; }).length) {
if (!$selectElement.attr("multiple")) { // unselect for single-select
$selectElement.val('');
}
$selectElement.append('<option val="' + newValue + '" selected>' + newValue + '</option>');
$selectElement.trigger('chosen:updated');
}
} catch(error) {
// pass
}
e.target.focus();
}
return false;
}
});
Другим решением было бы вызвать выбранную триггерную функцию : no_results , если новые значения следует добавлять только в том случае, если явного результата нет:
$(".chosen-select.chosen-newValuesAllowed").on("chosen:no_results", function(e, data){
var newValue = data.chosen.get_search_text();
...
});