Question

I am using the jQuery plugin searchabledropdown, which essentially transforms a <select> selection element into an input field where results are displayed as you type (it still looks and behaves like a dropdown select though!).

Now I’d like to pass focus to such a transformed element. What I did:

• I looked up said elements in the Chrome web tools,
• then wrote a matching jQuery selector,
• finally called focus() on it.

My code seems to work for other elements (tried it with a not transformed, regular <select> element, where it worked fine).

jQuery(".map-searchbox input").focus();

Giving focus to the input element which was created by searchabledropdown does not work however… Here is the outline of the html elements after transformation. (Sorry for all the style garbage, but I was not sure if it might be important…)

<div class="map-hudbox map-searchbox">
  <select class="searchselect" style="text-decoration: none; width: 163px; height: 19px;">
    <option value="...">...</option>
    ...
  </select> 
  <input type="text" style="height: 17px; position: absolute; top: 0px; left: 0px; margin: 0px; padding: 2px 0px 0px 3px; outline-style: none; border-style: solid solid none; border-color: transparent; background-color: transparent; border-left-width: 1px; border-top-width: 1px; font-size: 12px; font-variant: normal; font-weight: normal; color: rgb(68, 68, 68); text-align: -webkit-auto; text-indent: 0px; text-shadow: none; text-transform: none; width: 140px; z-index: 2;">
  <div style="position: absolute; top: 0px; left: 0px; width: 165px; height: 19px; background-color: rgb(255, 255, 255); opacity: 0.01; z-index: 1;"></div>
</div>

The input and the bottom div elements are the ones created from the select at the top by the searchabledropdown plugin. And the input field is what I would like the focus to be given to.

Any ideas why the normal .focus() call does not help?

Help would be much appreciated! 🙂

---

P.S. To obviate the usual suggestion to check the jQuery selector: the selector works, and if printed out via the Chrome JS console shows me exactly the input element listed above.

Answer 1

Gave it an other go a while a go.

I realized the problem was one of visibility. The searchabledropdown plugin was changing visibilities on input and select elements, and giving focus to invisible elements obviously didn’t work.

After figuring out what to make visible when the above mentioned jQuery(".map-searchbox input").focus(); worked like a charm.