Ввод значений в jquery-select2, которых нет в списке выбора

У меня есть прецедент, когда я разрешаю людям вводить значения в текстовое поле select2 плагин которые не отображаются в списке выбора.

в одном случае я предоставляю проверку и не отправляю, если у пользователя нет выбранного допустимого элемента, но пока они этого не сделают, я не хочу очищать их значения. Поле выбора может содержать 1.00, 1.50, 1.75, NA, ABS, и пользователь только что набрал 1.80. Это недопустимое значение, но я не хочу терять свои изменения, я буду отмечать это поле недействительно и позволяет им исправлять свои изменения. Я не хочу добавлять 1.80 в поле выбора, поскольку это недопустимое значение, но я также не хочу его очищать.

Как этого можно достичь?

9
javascript jquery jquery-select2

2 ответов

Если вы проверяете в JS, Select2 имеет пример динамической загрузки / генерации данных, который переопределяет query (), чтобы просто повторить ввод пользователя.

см.:http://ivaynberg.github.io/select2/ 'Загрузка Данных'

Я решил аналогичную проблему (на стороне сервера) с помощью jQuery UI "автозаполнение". Здесь я взял подход возврата объектов, обертывающих оба a метка с возможным пояснительным сообщением, a текст стоимостью без украшение и комбинированное ID значение & флаг состояния. Я переехал!--0--> сохранить текст & ID для скрытых полей.

в моем случае я различал существующих клиентов ссылка, или создание нового клиента с введенным именем. Я смог перечислить варианты сопоставления существующих клиентов или создания "нового клиента ABC", довольно красиво:

пользователь вводит: "Алфавитный суп" и видит выбор из:

  • Альфа Упаковка
  • Кэмпбеллс Суп
  • создать "алфавит суп"

аналогичный метод может быть применим и к вам. Надеюсь, это поможет.

7
$(document).ready(function() {
    var items = [{id: "1", text: "some_available_text"}];
    $("#hidden_input_for_select2").select2({
        query: function (query) {
            var data = {results: []};
            if(query.term.length > 0){
                data.results.push({id: 0, text: query.term });
            }
            $.each(items, function(){
                if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){
                    data.results.push({id: this.id, text: this.text });
                }
            });
            query.callback(data);
        }
    });
});
2