jQuery Autocomplete Inside a Popup

jquery

Solution

change this (remove px)

$(".ui-autocomplete").css("z-index", "99999999999999px");

to

$(".ui-autocomplete").css("z-index", "2147483647");

FYI: z-index: 2147483647 is the max value. check this SO answer.

Problem

I am trying to implement the autocomplete behaviour to my application using jQuery. My component for autocomplete is present inside a popup box and I am able to call the autocomplete method on this component I mean I am getting the data from AJAX (verified in firebug) But that data is not getting displayed in UI side Where as if I integrate to a component directly present in a page (not in popup) I am able to get the behaviour. Hoping some CSS issue. ``` $('#id').live("keydown.autocomplete", function () { $(this).autocomplete({ source: function (request, response) { $.ajax({ 'url': 'http://localhost:7001/solr/select', 'dataType': 'jsonp', 'jsonp': 'json.wrf', 'data': { 'wt': 'json', 'q': "state:*" + request.term + "*" }, 'success': function (data) { response( $.map(data.response.docs, function (item, i) { return { label: item.state, value: item.state }; })); }, open: function(event, ui) { $(".ui-autocomplete").css("position", "absolute"); $(".ui-autocomplete").css("top", "100px"); $(".ui-autocomplete").css("left", "100px"); $(".ui-autocomplete").css("z-index", "99999999999999px"); } }); } }); }); ```

Original source

Related problems