Question

I have implemented the ui autocomplete widget.
In my case, I supply a fixed list of suggestions.

When I enter the field and it is filled, I would like to select the suggestion which equals the text in the input field.

Any suggestion how to do that?

Answer 1

For what you need you can add your own handler for open event, where you can decide which of the menu items will be activated. Here is my sample implementation:

$('#myinput').autocomplete({
    source: function(request, response) {
        response(["bus", "car", "carpet", "donkey"]);
    },
    open: function(event, ui) {
        var val = $('#myinput').val();
        var menu = $(this).data("autocomplete").menu;
        var item = menu.element.find('a:contains("' + val + '")').first();
        menu.activate($.Event({ type: "mouseenter" }), item.parent());
    }
});

You can check the fiddle here.

PS: You might be able to pull the menu object from ui parameter directly, but I don’t see it documented and right now I am too lazy to investigate that further 😉

PS2: Also consider checking for null references when no matches are found which i didn’t include..