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
– Arno 2501, Commented Nov 12, 2012 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
– Arno 2501, Commented Nov 12, 2012 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
– John Dvorak, Commented Nov 12, 2012 at 13:57

Community · Accepted Answer · 2017-05-23 12:18:42Z

1

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 12, 2012 at 14:56

Mehdi Bugnard

3,9875 gold badges51 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arno 2501 · Accepted Answer · 2012-11-12 16:02:21Z

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

Collectives™ on Stack Overflow

Restrain user input to available list in jquery autocomplete

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related