jquery ui autocomplete autofocus with category element as first

Question

I'm trying to get my first item in my jquery autocomplete selected when using categories. Now my menu looks something like this:

[category] <- autofocus selects this one
[item1]    <- autofocus should select this one
[item2]
[item3]
[category]
[item4]
[item5]
etc.

What i already tried: 1. adding ui-state-disabled to my category 2. searched google how to overwrite the menu.next() function so i could detect if the item is a category 3. searched google on how to set the selected element manually including triggering the select event

So far no luck for me so i hope you guys have any suggestions ^^

fidle: http://jsfiddle.net/uynct53p/5/ (works with jquery 1.9 but not with 1.11)

You can trigger a `select` event with the field wanted on `open`. This won't disable improperly formatted items, though: http://stackoverflow.com/questions/7633727/how-do-you-trigger-autocomplete-select-event-manually-in-jqueryui — blgt, Nov 09 '15 at 15:27
added jsfidle to show the problem, as you can see the categories are selectable and also get selected by autoFocus in jquery 1.11. if i use jquery 1.9 it works like i want to, categories are not selectable and autofocus = selects the first real item — Mathijs Corten, Nov 10 '15 at 08:19

score 0 · Answer 1 · answered Nov 10 '15 at 08:59

0

Since it's still an input element, you can invoke val method on the autocomplete in order to set its value.

Since you want to set the value to the first element in your data object, simply do

$( "#search" ).autocomplete({ /* ... */ })
.val(data[0].label)
// ...

Your fiddle: http://jsfiddle.net/uynct53p/7/

answered Nov 10 '15 at 08:59

Anticom

975
13
29

that would be true if the fidle was a real representation of my problem. the problem at this moment is that with jquery 1.11 categories = are selectable, while in jquery 1.10 they are not... – Mathijs Corten Nov 10 '15 at 09:07

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

Found: jquery ui autocomplete combobox with categories

answered by: Aureltime

this makes categories non selectable in jquery 1.11.*

$.extend($.ui.menu.prototype.options, {
    items: "> :not(.ui-autocomplete-category)"
});

edited May 23 '17 at 12:03

Community

1
1

answered Nov 11 '15 at 07:58

Mathijs Corten

21
2

jquery ui autocomplete autofocus with category element as first

2 Answers2