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

score 92 · Answer 1 · edited Jul 22 '20 at 06:50

92

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

edited Jul 22 '20 at 06:50

Andreas

5,393
9
44
53

answered Mar 29 '13 at 13:58

Neils

1,513
1
12
7

4

Worked for me, nice one :) – littledynamo Aug 07 '13 at 20:47
2

Worked for me also ;) – bungdito Aug 26 '13 at 03:13
2

`change: (e, ui) -> ($ '#input_box').val('').focus() if not ui.item` for the Coffeescripters. – Dom Vinyard Feb 19 '14 at 13:46
`event.currentTarget.value = ''; event.currentTarget.focus();` any cases where this wouldn't work? – MrYellow Aug 27 '15 at 05:09
1

Best answer this is the proper way of handling it. – Egli Becerra Aug 17 '17 at 04:23
works perfect. on change autocomplete if not item selected set val to nothing. its ok – Cesar BA Feb 10 '18 at 12:11
1

Should be accepted answer! I would suggest `$(this).val(""); $(this).focus();` – Dan Mar 31 '19 at 07:46
This in essence "clears" the errant entered texts and sets focus "back to the box" if somebody types in a non-option then hits tab. But it does nothing if they type in a non-option and hit "enter" :| The combobox example does something like this (but shows a tooltip if invalid): https://jqueryui.com/autocomplete/#combobox – rogerdpack Dec 29 '19 at 06:13
This solution will not work when the page loaded with default value. – Amer Jamaeen Feb 12 '22 at 11:42

score 10 · Answer 2 · edited May 25 '10 at 23:09

10

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

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

HTH

edited May 25 '10 at 23:09

Chad Birch

73,098
23
151
149

answered May 25 '10 at 22:59

Raja

3,608
3
28
39

4

You can still type into that, that's exactly what he said he didn't want. – Chad Birch May 25 '10 at 23:00
1

No I don't think he wants that. I think he wants to get it from the item from the list i.e. if the user starts to type "Ja" then if it lists "Java" and "Javascript" then he wants the user to select from one of them and not type "Jab" and submit. – Raja May 25 '10 at 23:03
1

No I said autocomplete, which implies typing is allowed. But the typing must be restricted to only items in the autocomplete list. The combobox example does exactly that. – JK. May 25 '10 at 23:03
Combobox functionally is perfect, but the UI is bad - it looks very different from standard the < select >, so I can't use it. I will look at the example in more detail to see if the drop down button can be left out. – JK. May 25 '10 at 23:05
1

I'm the one that misunderstood what he wanted then. Made an irrelevant edit to this answer so I could take back my downvote. – Chad Birch May 25 '10 at 23:09

score 3 · Accepted Answer · answered May 25 '10 at 23:13

3

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.

answered May 25 '10 at 23:13

Aaron Janes

304
3
11

I went with the .change() event, it was easier and quicker than trying to change the combobox solution to fit. – JK. May 26 '10 at 02:25
@Neils pointed out below another answer and that worked like a charm change: function(event,ui) { if (ui.item==null) { $("#your_input_box").val(''); $("#your_input_box").focus(); } } – Sandeep Aug 05 '14 at 23:33

score 0 · Answer 4 · answered May 03 '12 at 17:55

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.

score 0 · Answer 5 · edited Jul 30 '14 at 14:53

0

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

edited Jul 30 '14 at 14:53

VGR

40,506
4
48
63

answered Aug 28 '12 at 21:27

Joe

7,922
18
54
83

user7793758 · Answer 6 · 2019-10-24T14:42:38.000

0

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

edited Oct 24 '19 at 14:42

answered Oct 24 '19 at 13:25

user7793758

79
1
4

While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – nircraft Oct 24 '19 at 14:33
In this particular example, i extend the autocomplete ui widget to behave this way so I don't have to fix every place it occurs in my application. If you only have a few, then just define the close function and don't bother extending the widget – user7793758 Oct 24 '19 at 14:45

score -1 · Answer 7 · answered Jan 15 '17 at 16:16

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

Autocomplete disallow free text entry?

7 Answers7

Linked

Related