Autocomplete disallow free text entry?

Question

Is it possible to disallow free text entry in the JQuery UI autocomplete widget?

eg I only want the user to be allowed to select from the list of items that are pre

Answer 1

If you want the user to just get the item from the list then use autocomplete combobox.

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

HTH

Answer 2

I used the combobox module which gives you a "down arrow" button. Then to the input tag, just add the following to the input tag right around line 41 (depending on your version of the combobox http://jqueryui.com/demos/autocomplete/#combobox )

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

Then add code so that if the user clicks the input box, it'll show the drop list.

For my purposes, I added a readonly flag that I can pass in to the module so if I need it readonly, I can turn it on/off as well.

Answer 3

Old question, but here:

    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 4

The combobox option works well if you are using a set list, however if you have a dynamic generated list via a json get, then you can only capture the data on change.

Full example with additional parameters below.

        $("#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

According to the API documentation, the change event's ui property is null if the entry was not chosen from the list, so you can disallow free text as simply as this:

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

Answer 6

One way would be to use additional validation on form submit (if you are using a form) to highlight an error if the text isn't one of the valid option.

Another way would be to attach to the auto complete's change event which will get fired even if an options isn't selected. You can then do validation to ensure the user input is in your list or display an error if it is not.