CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
Arnaud
Arnaud

Reputation: 13

Jquery UI Autocomplete Select first item but don't populate input

I want to select the first item but don't want to populate the input with it. So if I press enter the first value is selected but never does the input get autopopulated until the user either hits enter or clicks elsewhere on the screen causing the list to close.

I have had a look at selectFirst and autoFocus but they were not exactly what I was looking for. Not sure if what I am asking for is even possible but it seems to me that it must be.

Any ideas?

Upvotes: 1

Views: 3690

Answers (2)

oomkoos
oomkoos

Reputation: 163

You can use the focus event handler and autoFocus option together to populate a hidden input. Then when the autocomplete menu closes, use the close event handler to populate whatever field you want using the hidden input.

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

First off, selectFirst and autoFocus are not options on the jQueryUI autocomplete. They are from the plugin that eventually was adopted into jQueryUI and so the documentation found here is deprecated.

I'm not exactly clear on what you're trying to accomplish, but it sounds like you just don't want an item to populate the input element when you focus on it in the dropdown menu. This is indeed possible:

$("#autocomplete").autocomplete({
    source: [...],
    focus: function() {
        return false;
    }
});

returning false from the focus event handler will prevent the focused item in the menu from populating the dropdown.

Note that clicking elsewhere on the page won't populate the input element. This is because when you move your mouse away from the menu, an item you had selected loses focus. This seems like natural behavior to me, but there's probably a way to make that happen too.

Here's a working example: http://jsfiddle.net/andrewwhitaker/RyTuV/

Upvotes: 2

Related Questions