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

Question

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

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

如何将 jquery 自动完成配置为顶部？这是js问题还是css问题？

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

<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”或禁用其他表单工作的建议都将不胜感激。

Answer 1

尝试

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

Answer 2

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

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

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

z-index: 999;

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

Answer 3

使用 z-index 属性

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

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

                        }
                    })
                }

            });