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

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

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

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

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    change: function(event, ui) {
        if (ui.item == null) {
          event.currentTarget.value = ''; 
          event.currentTarget.focus();
        }
    }
});

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

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

ХТН

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

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

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

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

Старый вопрос, но вот:

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

Если вы хотите, чтобы пользователь мог выбрать рекомендацию из списка автозаполнения, попробуйте определить функцию закрытия следующим образом. Функция закрытия вызывается, когда раскрывающийся список результатов закрывается, если пользователь выбрал из списка, то определяется event.currentTarget, если нет, то раскрывающийся список результатов закрывается без выбора пользователем опции. Если они не выбирают вариант, я сбрасываю ввод на пустой.

/**
 * The jQuery UI plugin autocomplete
 */
$.widget( "ui.autocomplete", $.ui.autocomplete, {
   options: {
      close: function( event, ui ) {
         if (typeof event.currentTarget == 'undefined') {
            $(this).val("");
         }
      }
   }
 });

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