Question

jQuery Autocomplete works by putting a select box on the page and doing this:

$(".myselect").combobox();

where your select box has a class attached to it called “myselect”.

The combobox() functionality hides your select box, and puts a text box in its place with all of the jQuery UI classes attached.

What I want to do is bind to events on the box that “replaces” the select box. I could attach to one of the jQuery UI classes that are present on that element:

<input class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" 
       autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"
       aria-describedby="ui-tooltip-0">

However, I don’t want to bind to EVERY combobox text box in my whole application. Is there som way to pass a class name to combobox() in order to have it pass that class name on to the text box that it generates?

UPDATE:

No, that’s not what I’m asking. I can not figure out how to dynamically add a class to the input box that is being rendered. If I could add a class, then I could use a selector to attach to it. Right now, I sure could still use a selector to attach to it, but it would attach to EVERY input box that was generated by combobox in other parts of my application. I don’t want to do that. I only want to bind to the input box on this one page.

How about this. How can I make the combobox example from jQuery AutoComplete put up an alert that says “Hello” after a value has been chosen from the combobox?

Answer 1

You should be able to just do an addclass on the text box it generates and add whatever class you want.

$("#textboxId").addClass('className');

That should give you what you need.