jQuery Autocomplete Inside a Popup

Question

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");
                    }
            });
        }
    });
});

you say `Hoping some css issue.` but yet you dont provide css code — exexzian, Jul 16 '13 at 06:25
Are using `live`?? It is depreciated, so use `.on()`. For reason check [diff between on and live?](http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on) — Praveen, Jul 16 '13 at 06:28
@user1671639 : Thanks for our help i have fixed my problem by reducing the Z-index of parent component :) — Siva, Jul 16 '13 at 07:25
@DeadMan if you did fixed your problem by reducing z-index you can select any one of the answer as selected, it will help future visitors as well — exexzian, Jul 16 '13 at 22:19

score 6 · Accepted Answer · edited May 23 '17 at 12:17

6

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.

edited May 23 '17 at 12:17

Community

1
1

answered Jul 16 '13 at 06:49

Praveen

55,303
33
133
164

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

z-index takes number (not appended with px and I strongly doubt about setting z-index to such a higher value 99999999999999) as property value,
check the usage here

example: z-index: -1;

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 16 '13 at 06:48

exexzian

7,782
6
41
52

score 0 · Answer 3 · answered Dec 16 '15 at 14:17

0

Put the setting in a css file and then you don't have to type it out for every autocomplete, although you can still qualify the setting there if you need to:

.ui-autocomplete {
    z-index: 2147483647;
}

answered Dec 16 '15 at 14:17

arame3333

9,887
26
122
205

jQuery Autocomplete Inside a Popup

3 Answers3