javascript - JQuery Autocomplete - Force choice - Stack Overflow

admin管理员组

文章数量:1289875

I have a form working with JQuery Autoplete and it works fairly well. Now I need another element to force a user to select a valid choice in the autoplete input. The can type whatever they want and everything is filtered by autoplete. But they have to select something from the served list. If they don't the inputfield must get blanked. Tried out a few things with change and select to no avail. This is the code of my autoplete. I saw some examples operation with data instead of source. This seems to make a big difference

$(function () {
    $("#sp_name").autoplete({
        minLength: 2,
        delay: 300,
        source: function (request, response) {
            $.ajax({
                url: "./Search/",
                dataType: "json",
                data: {
                    term: request.term,
                    zoekterm: $("#al").html()
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.naam,
                            value: item.naam
                        }
                    }));
                }
            });
        }
    })
});

I have a form working with JQuery Autoplete and it works fairly well. Now I need another element to force a user to select a valid choice in the autoplete input. The can type whatever they want and everything is filtered by autoplete. But they have to select something from the served list. If they don't the inputfield must get blanked. Tried out a few things with change and select to no avail. This is the code of my autoplete. I saw some examples operation with data instead of source. This seems to make a big difference

$(function () {
    $("#sp_name").autoplete({
        minLength: 2,
        delay: 300,
        source: function (request, response) {
            $.ajax({
                url: "./Search/",
                dataType: "json",
                data: {
                    term: request.term,
                    zoekterm: $("#al").html()
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.naam,
                            value: item.naam
                        }
                    }));
                }
            });
        }
    })
});

• javascript
• jquery
• json

Share Improve this question Follow asked Sep 10, 2013 at 13:31 PattuxPattux 12511 gold badge11 silver badge55 bronze badges 5

• you can bind blur event to your autoplete input, in your case $("#sp_name"), then determine whether it has perfered value or not – jasonslyvia Commented Sep 10, 2013 at 13:35
• Should I do that with another JSON call? Or is there some other smart way? – Pattux Commented Sep 10, 2013 at 13:46
• nope, let's assume your $("#sp_name") input expect user to select a name from the autoplete suggestion list, then you can bind blur event to your input like `$("#sp_name").blur(function(){ if (!this.value){/* deal with the case user doesn't choose anything*/}}); – jasonslyvia Commented Sep 10, 2013 at 13:48
• What if they input something that's not in the suggestion list? – Pattux Commented Sep 10, 2013 at 13:52
• 1 i myself usually add a hidden input to store the id or something of that choice, by determine the hidden input, i can tell from whether user choose from the autoplete list or not – jasonslyvia Commented Sep 10, 2013 at 13:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Try this:

I am using a local list here, but you can achieve this via json data source too. Just add a change event. The only problem this can have is that if user does not click on the suggestion, it will turn blank (even if user is entering the same text as suggestion). It will be mandatory for user to click on the suggestion.

var list = ["c", "c++", "c#","Basic","Mongo"];

$('#auto').autoplete({
source: list,

select: function (event, ui) {
    $(this).val(ui.item ? ui.item : " ");},

change: function (event, ui) {
    if (!ui.item) {
        this.value = '';}
//else { Return your label here }
}
}); 

JsFidle for it: http://jsfiddle/sarcastic/7KdZP/112/

In your case, Change function would be something like this:

change: function (event, ui)
{
if (!ui.label) { this.value = ''; }
}

本文标签： javascriptJQuery AutocompleteForce choiceStack Overflow