Home/ Questions/Q 6176231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:03:51+00:00

I am using jQuery Ui Autocomplete 1.8.14 and I would like to do two

  • 0

I am using jQuery Ui Autocomplete 1.8.14 and I would like to do two things:

Assign an id to the autocomplete. For instance, I might have many autocompletes on page and I’d need a way to identify each. In particular, in the background autocomplete is generating something like

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 444px; left: 48px; display: block; width: 118px;">

What I would like is to assign and id to the ul tag. The reason why I want to do this is for the following reason…

There is a close event and one of the parameters is ui. In the “select” even this ui is populated with data that is used to create the autocomplete but for the close event, ui is empty. That’s why I would like to have an id on the ul tag in my previous question. If I can get the ui data then I don’t need to bother with setting the id although I would think that it’s a desirable feature regardless.

Hope I was reasonably clear.

EDIT: Apparently, I wasn’t clear enough :). Hopefully, the following will help clarify what I mean:
After an item is selected from the autocomplete, I am using the select event to populate other form elements using the “ui” parameter. That’s working all fine and great.

However, now what I want to do is this, say in the autocomplete I write out an item which exists in the autocomplete. However, I don’t select the item but instead tab to the next form element. What I would like to happen is to check the term entered in the autocomplete, loop through the autocomplete list. If the term entered matches one of the items in the list, I just get the data out of the “object attached” and then populate the form elements accordingly.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a demo that I think does what you want. I suspect there is a better way of doing this though. I literally took the part of the question about TAB and bound an event to that key.

    Note: I have just seen your comment on the question, so will have a look at that demo as well now. So in my demo the JSON data is in a different format, so it might need some tweaking.

    Oh, I’ve just found an existing extension that might already do what you want (from here) Typical! 🙂

    Edit Oh I see, most of the code is already done in your fiddle. All you need to just use $parentItem.data('item.autocomplete');.

    • 0