CODEWITHSUNDEEP
jqueryjquery-uijquery-autocomplete
JK.
JK.

Reputation: 21807

Autocomplete disallow free text entry?

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 presented in the autocomplete list, and dont want them to be able to write some random text.

I didn't see anything in the demos/docs describing how to do this.

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

I'm using autocomplete like this

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

Upvotes: 46

Views: 35138

Answers (7)

Neils
Neils

Reputation: 1513

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

Upvotes: 92

user7793758
user7793758

Reputation: 79

If you would like to restrict the user to picking a recommendation from the autocomplete list, try defining the close function like this. The close function is called when the results drop down closes, if the user selected from the list, then event.currentTarget is defined, if not, then the results drop down closed without the user selecting an option. If they do not select an option, then I reset the input to blank.

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

Upvotes: 0

PodTech.io
PodTech.io

Reputation: 5254

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

Upvotes: -1

Joe
Joe

Reputation: 8042

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

Upvotes: 0

Mike
Mike

Reputation: 217

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.

Upvotes: 0

Aaron Janes
Aaron Janes

Reputation: 404

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.

Upvotes: 3

Raja
Raja

Reputation: 3618

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

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

HTH

Upvotes: 10

Related Questions