jquery autocomplete field that REQUIRES a selected value?

Question

I need some jquery plugin as they use it on most flight booking sites where you have to choose your departure/arrival airport from a combolist.

i had a look around, but

Answer 1

You have two different questions here.

Sending hidden IDs should be done using an array of objects with both a value and label attribute in your source. You'll need to use the select and focus options to support this. http://jqueryui.com/demos/autocomplete/#custom-data

Forcing the user to select a valid option could be done a few ways. I like the idea of blanking the input box if the user types in an invalid option and then leaves the box. You can do this using the "change" option. This is what James' code does too.

Here is a working example with both features: http://jsfiddle.net/vZeHr/4/

Answer 2

mm.... i faced the same problem and couldn't solved it . i think you will have to edit the plugin .

you said

but the issue with this is that user can enter anything that is not on the list via keyboard.

the thing is you can't disable the text field , because the auto-complete values are added according to what you type in the text field .

one possible way is you can check there are no suggestion values , in text field's on-change or on-blur function . if there are no suggestions , then you entered a wrong value . so you can give a an error message .

Answer 3

The plugin by jQuery UI actually allows you to send through a text value and an integer as return types.

Here is the general code I use for auto completes.

$("#c_where").autocomplete({
    autoFill: true,
    mustMatch: true,
    selectFirst: true,
    source: function(request, response) {
        $.ajax({
            type: "post",
            url: "inc/ajax/json/hotels.php", // Upload this aswell
            data: {
                maxRows: 12,
                term: request.term
            },
            success: function(data) {
                response($.map(JSON.parse(data), function(item) {
                    return {
                        label: item.name,
                        value: item.name,
                        id: item.hid
                    }
                }));
            }
        });
    },
    change: function(event, ui) {
        /*if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
            $(this).val('');
        }*/
        if (!ui.item) {
            $(this).val('');
        }
    },
    select: function(event, ui) {
        $('#c_where').data("id", ui.item.id);
    }
}).live('keydown', function (e) {
    var keyCode = e.keyCode || e.which;
    if((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
        $(this).val($(".ui-autocomplete li:visible:first").text());
    }
});