Question

我正在尝试使用jQuery为我的应用程序实现自动完成行为我的自动完成组件存在于弹出框内，我可以调用此组件的自动完成方法我的意思是我从AJAX获取数据（在firebug中验证）
但该数据未在UI端显示

好像我整合到一个直接出现在页面中的组件（而不是弹出窗口），我能够得到这种行为。

希望有一些CSS问题。

$('#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");
                    }
            });
        }
    });
});

Answer 1

更改此内容（删除px ）

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

到

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

仅供参考： z-index：2147483647是最大值。检查此SO answer。

Answer 2

z-index需要number（不附加 px ，我强烈怀疑将z-index设置为如此高的值99999999999999）作为属性值，
检查使用情况here

示例：z-index: -1;

Answer 3

将设置放在css文件中，然后您不必为每个自动填充输入，尽管如果您需要，仍然可以在那里限定设置：

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

弹出窗口内的jQuery自动完成

3 个答案: