Автозаполнение запрещает ввод бесплатного текста?

Можно ли запретить бесплатный ввод текста в виджетах автозаполнения пользовательского интерфейса JQuery?

Например, я хочу, чтобы пользователю было разрешено выбирать из списка элементов, представленных в списке автозаполнения, и не хочу, чтобы они могли писать какой-то случайный текст.

Я ничего не видел в демо/документах, описывающих, как это сделать.

http://jqueryui.com/demos/autocomplete/

Я использую автозаполнение, подобное этому

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }

Ответ 1

Один из способов - использовать дополнительную проверку на отправке формы (если вы используете форму), чтобы выделить ошибку, если текст не является допустимым.

Другой способ - присоединить к событию автоматического полного изменения, которое будет запущено, даже если параметры не выбраны. Затем вы можете выполнить проверку, чтобы убедиться, что пользовательский ввод находится в вашем списке или отображает ошибку, если это не так.

Ответ 2

Согласно документации API, свойство change event ui имеет значение null, если запись не выбрана из списка, поэтому вы можете запретить свободный текст так же просто, как это:

change: function(event,ui)
        {
        if (ui.item==null)
            {
            $("#your_input_box").val('');
            $("#your_input_box").focus();
            }
        }

Ответ 3

Если вы хотите, чтобы пользователь просто получил элемент из списка, используйте автосообщение автозаполнения.

http://jqueryui.com/demos/autocomplete/#combobox

HTH

Ответ 4

Я использовал модуль combobox, который дает вам кнопку "стрелка вниз". Затем во входной тег просто добавьте следующее к тегу ввода прямо вокруг строки 41 (в зависимости от вашей версии combobox http://jqueryui.com/demos/autocomplete/#combobox)

input.attr( "readonly", "readonly" );

Затем добавьте код, чтобы при щелчке пользователем окна ввода он отобразил список.

В моих целях я добавил флаг readonly, который я могу передать в модуль, поэтому, если мне это нужно только для чтения, я могу включить его и выключить.

Ответ 5

Старый вопрос, но здесь:

    var defaultVal = '';
    $('#selector').autocomplete({
        source: url,
        minlength: 2,
        focus: function(event, ui) {
            if (ui != null) {
                defaultVal = ui.item.label;
            }
        },
        close: function(event, ui) {
            $('#searchBox').val(defaultVal);
        }
    });

Ответ 6

Параметр combobox работает хорошо, если вы используете список наборов, однако, если у вас есть динамически сгенерированный список через json get, вы можете только фиксировать данные об изменениях.

Полный пример с дополнительными параметрами ниже.

        $("#town").autocomplete(
        {       
            select: function( event, ui ) {
                $( "#town" ).val( ui.item.value );
                return false;
            },        
            focus: function( event, ui ) {
                    $( "#town" ).val( ui.item.label );
                    return false;
                },           
            change: function(event, ui) {
                if (!ui.item) {
                    $("#town").val("");
                }
            },
            source: function(request, response) {
                $.ajax({
                    url: 'urltoscript.php',
                    dataType: "json",
                    data: {
                        term : request.term,
                        country : $("#abox").val()    // extra parameters
                    },                        
                    success: function(data) {
                        response($.map(data,function (item)
                        {                                
                            return {
                                id: item.id,
                                value: item.name
                            };
                        }));
                    }
                });
            },
            minLength: 3
            , highlightItem: true                                
        });

Ответ 7

Как насчет опции mustMatch?

'Если установлено значение true, автообновление будет разрешать только результаты, представленные бэкэнд. Обратите внимание, что недопустимые значения приводят к пустому ящику ввода. '