Restrain user input to available list in jquery autocomplete

Question

I'm using jquery ui(1.8.11) autocomplete plugin.

It has a simple custom behavior to check whether the value exists in the available list. That's because I want to restrain the user to what is available in the list. If input is not in the list it will erase the content of the box. It's working fine.

But the following implementation still allow the user to write anything that's not in the choices. I would prefer not letting him write something that doesn't exist.

So is there a way to erase characters that the user would write as soon as there is no option left ? Or better only letting him hit a sequence of characters if it has a lookup in the list.

Here is my code so far

$("#autocomplete").autocomplete({
    autoFocus: true,
    delay: 200,
    source: function (request, response) {
        $.ajax({
            url: "/Country/Find", type: "GET", dataType: "json",
            data: { search: request.term, maxResults: 10 },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item, value: item }
                }))
            }
        })
    },
    change: function (event, ui) {
        if (!ui.item) {
            $(this).val('');
        }
    }
});

Thanks but this doesn't provide with the functionality I'm looking for even if it's really convenient I admit. — Arno 2501, Nov 12 '12 at 13:53
What I'd like is to not allow to write something in the input box that would not match a sequence in one of the available items — Arno 2501, Nov 12 '12 at 13:55
That's exactly why I suggest Chosen. If the input is not one of the options, it cannot be selected. User can type whatever he wants but it gets ignored - the select acts as if the input was empty (and indicates that to the user) — John Dvorak, Nov 12 '12 at 13:57
You can still delete the internal input if you like and (unlike here, and I think this is the problem) you don't have to fight AJAX-induced asynchronicity. — John Dvorak, Nov 12 '12 at 14:00
I totally understand and that's cool but my code does the same. If the item is not matched you end up with an empty input. It's great to say no results match ! But I would like better to not allow any input that does not match. — Arno 2501, Nov 12 '12 at 14:00
For exemple you have aaa aab aac as long as you write aa you get the 3 possible options, then you write aab you get only aab and now you are not allowed to write anything else ! you can just erase — Arno 2501, Nov 12 '12 at 14:01
I believe your problem is asynchronicity. You can avoid that with Chosen. — John Dvorak, Nov 12 '12 at 14:01
I don't ! It seems fine but it doesn't do what I would like to do ! Nothing does it's why I'm here :-) — Arno 2501, Nov 12 '12 at 14:05

score 1 · Answer 1 · edited May 23 '17 at 12:18

I found this question to retrieve the selection of dropdownlist! Get selected value in dropdown list using JavaScript? but to delete the last character no idea ...

$("#autocomplete").autocomplete({
autoFocus: true,
delay: 200,
source: function (request, response) {
    $.ajax({
        url: "/Country/Find", type: "GET", dataType: "json",
        data: { search: request.term, maxResults: 10 },
        success: function (data) {
            response($.map(data, function (item) {
                    var e = document.getElementById("ddlViewBy");
                    var strUser = e.options[e.selectedIndex].value;
                    if(strUser  != null)
                    {
                        return { label: item, value: item }
                    }
                    else
                    {
                        //remove last char 
                    }
            }))
        }
    })
});

Arno 2501 · Accepted Answer · 2012-11-12T16:02:21.350

I did it this way :

$("#autocomplete").autocomplete({
    autoSelect: true,
    autoFocus: true,
    delay: 200,
    source: function (request, response) {
        $.ajax({
            url: "/Country/Find", type: "GET", dataType: "json",
            data: { search: request.term, maxResults: 10 },
            success: function (data) {
                //Check the length of the returned list if it's empty 
                if (data.length == 0) {
                    //Remove the last character from the input
                    $("#autocomplete").val(function (index, value) {
                        return value.substr(0, value.length - 1);
                    })
                    //Rerun search with the modified shortened input
                    $("#autocomplete").autocomplete("search");
                }
                response($.map(data, function (item) {
                    return { label: item, value: item }
                }))
            }
        })
    }
});

Restrain user input to available list in jquery autocomplete

2 Answers2