Is there a jQuery Autocomplete plugin that'll force the selection of an item?

There's autocomplete, but it doesn't force the selection of an item. I need something like this but it has to fo开发者_StackOverflow社区rce an item to be selected before you can "submit".

Does it exist?

You can use "change" event of Autocomplete

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });

This is my solution with .blur (moreover I use name|ID pairs)

jQuery("#username").autocomplete(
    "/yii_app/stock/suggestUser",
    {
        'mustMatch':true,
        'multiple':false,
        'formatItem':function(result, i, num, term) {
            return '<small>'+result[1]+'</small>&nbsp;&nbsp;&nbsp;'+ result[0];
        }
    }
).result(
    function(event,item) {
        $("#user_id").val(item[1]);
    }
).blur(
    function() {
        $("#user_id").val('');
        $(this).search();
    }
);

user_id is a hidden input field, username is an text input field ajax result uses the following format: user1name|user1id\n user2name|user2id\n

Use the option:

mustMatch:true,

This is available in the Bassistance autocomplete plugin. Ii do not know if it is a part of jQuery autocomplete or of Bassistance's autocomplete, but it works!

This is my current solution using jQuery UI's autocomplete:

    $('#some-input').autocomplete({
        source: 'some-url',
        autoFocus: true,
        minLength: 2,
        select: function(event, ui) {
            //remember the selected item
            $('#some-input')
                .data('selected-item', ui.item.label);
        }
    }).blur(function() {
        var value = $('#some-input').val();
        //check if the input's value matches the selected item
        if(value != $('#some-input').data('selected-item')) {
            //they don't, the user must have typed something else
            $('#some-input')
                .val('') //clear the input's text
                .data('selected-item', ''); //clear the selected item
        }
    });

Each time the blur event is triggered, the input's value is checked to have been picked previously. If it hasn't been picked (you know that because the select event never triggered), the 'selected-item' variable will not match the input's value. Then you can do whatever you want (I clear the input, but you can try something else).

Use it in combination with the validation plugin. Just make the field required for the validation plugin.

You can also use the built in submit event

$('Autocomplete').autocomplete({
          select: function(event, ui) {
                       $('submit').show();
                  }
});