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

Question

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

HTH

Answer 3

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

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

Answer 4

Опция 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                                
        });

Answer 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);
        }
    });

Answer 6

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

input.attr («только для чтения», «только для чтения»);

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

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

Answer 7

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

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