Wrapping autocomplete results (ul) within an additional container (similar to bootstrap dropdowns)
Ok – so here's something which should probably be solved within minutes. Unfortunately, I have not been able to make this work for the last couple of days – so maybe someone is able to help.
Currently, the results of an autocomplete look something like this:
- <ul> # get the positioning
- <li>first result</li>
- <li>second result</li>
- </ul>
What I want to achieve is this structure:
- <div> # should get the positioning
- <span class="arrow-up"></span>
- <ul>
- <li>first result</li>
- <li>second result</li>
- </ul>
- </div>
Actually, I need to make the result list look like a drop-down with an additional up-arrow on the right-hand side.
What I tried so far:
- Wrapping the ul within a div with _renderMenu. This does not work because it is still the ul (and not the div) which gets the positioning.
- Changing ui.menu: Instead of using an ul I tried to use a div – this doesn't work either although I'm not able to specifically address the issue.
- Changing .open – doesn't help, because the structure is already there.
Any help is highly appreciated (I'm pretty sure I overlooked something really obvious).