4

When I start typing in the name of the species I am looking for the jQuery autocomplete widget comes with a dropdown and some results. Great!!

The only problem is that when I select an item from the list the "input element that is located under that list item gets activated". And results in an android native dropdown over the top. I have tried to use z-indexes on the autocomplete results box and on the input elements. Neither work.

Any ideas anyone?

Timo
  • 930
  • 2
  • 10
  • 22

2 Answers2

1

Well, nor propagation nor z-indexes seem to solve the problem.

The only way I found is to set other fields (that's all except for one being auto-completed) to disabled mode.

So, when auto-complete box is opened, I set all other inputs to disabled, and reset them once the box closes:

$("#venue_name").autocomplete({
    minLength: 2,
    source: venueData,
    open: function(event, ui) { // disable other inputs
        $("input#venue_address").attr("disabled", "disabled");
        $("input#venue_cross_street").attr("disabled", "disabled");
        $("input#venue_city").attr("disabled", "disabled");
    },
    close: function(event, ui) { // re-enable other inputs
        $("input#venue_address").removeAttr("disabled");
        $("input#venue_cross_street").removeAttr("disabled");
        $("input#venue_city").removeAttr("disabled");
    }
});

You can improve the code above, say, by putting elements to be disabled into array etc, but the basic logic stays the same: disable elements, so that android doesn't highlight them when auto-complete box is activated, and re-enable them once auto-complete box is out.

Victor Farazdagi
  • 3,080
  • 2
  • 21
  • 30
  • I ran into the same problem on chrome, and disabling the dropdown underneath affected being able to select the autocomplete choice on top of it to a degree. I am just going to hide it instead of disabling. – Cymbals Jan 10 '12 at 17:05
-1

Canceling event propagation might be a key to solving this. This question might help solve the problem you are running into. Event propagation in Javascript

This may also prove useful: http://www.quirksmode.org/js/events_order.html

Community
  • 1
  • 1
Norman H
  • 2,248
  • 24
  • 27
  • Just got busy with other stuff at the moment. But your answer is greatly appreciated. I will look in to it and come back to you with the results. – Timo Dec 16 '10 at 06:10