jquery自动完成结果出现在其他输入元素上答案

【问题标题】：jquery autocomplete results to appear over other input elementsjquery自动完成结果出现在其他输入元素上
【发布时间】：2013-03-03 20:47:18
【问题描述】：

在输入框上使用 jquery 自动完成功能。这是 100% 的工作，但认为样式需要一些工作。

目前，jquery 建议显示在其他输入元素的文本后面。如果我单击选择框下方的 jquery 选项，则会触发选择框，而不是选择自动完成选项。

如何将 jquery 自动完成功能配置在最前面？这是js问题还是css问题？

我尝试禁用另一个输入元素，使用以下代码命名为句点，但它不起作用：

<script type="text/javascript">
      $(function(){
        $("#customer").autocomplete({
          minlength: 5,
          source: "get_customers",
           open: function(event, ui) { // disable other inputs
        $("input#period").attr("disabled", "disabled");
    },
      close: function(event, ui) { // re-enable other inputs
        $("input#period").removeAttr("disabled");
    },
          messages: {
          noResults: '',
          results: function() {}
      }


        });
      });
</script>

任何关于让 jquery 列表“ontop”或禁用其他表单工作的建议都将不胜感激。

【问题讨论】：

我可以看到它可能与 z-index 问题有关的实时链接...在你的 css 中使用 z-index

标签： jquery css autocomplete

【解决方案1】：

试试

.ui-autocomplete{
   z-index:50;       //Where 50 is just an arbitrary number superior to your form's z-indexes
}

【讨论】：

【解决方案2】：

我看不到您的 html 标记，因此无法提供示例，但您需要使用 z-index css 属性来解决此问题。

您需要在包含所有建议的容器上使用它。您甚至可能需要在一些背景元素上设置它，但如果您还没有使用它，这不太可能。

我通常将我的设置为 999，如下所示：

z-index: 999;

只是为了确保它保持在顶部。

【讨论】：

【解决方案3】：

使用 z-index 属性

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

【讨论】：

【解决方案4】：

使用 appendTo:YourContainerDiv

$("#TextBox").autocomplete({
                appendTo: '.ContainerDiv',
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("Action","Controller")',
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.Name, value: item.Name };
                            }));

                        }
                    })
                }

            });

【讨论】：