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

                        }
                    })
                }

            });

jquery自动完成结果显示在其他输入元素上

4 个答案: