如何更改 jQuery UI 自动完成控件的建议框的大小和外观？

Question

我一直在阅读，我感到迷茫。我正在使用 jQuery UI 自动完成小部件来提供建议，它工作正常。只有它看起来很奇怪（见下图），我希望它看起来像我想要的那样。

我要改变的两件事是：

1. 它的位置，使其与它所服务的文本框一样宽。还有

2. 它的字体大小。

这是我目前的想法。

位置

我在文档中查找了自动完成小部件的position option，以及UI.position()插件的文档。

我想，“我希望建议框的“左上角”与 txtCategory 文本框的“左上角”对齐，”所以我说：

$("#txtCategory").autocomplete({
    source: articleCategories, // that's an array I made
    position: {
        my: "left top",
        at: "left top",
        of: "#txtCategory",
        collision: "fit"
    }
});

但我怀疑这行不通，因为我不知道如何告诉它我也希望它的“右下角”与文本框的“右下角”对齐。所以它现在看起来更加怪异（见下图）。

如何定位它，使其与文本框 txtCategory 一样宽，比如说大约 4 个条目高？

外观

为了改变外观，我正在阅读CSS Framework documentation 的主题 jQuery UI，但我不确定应该应用哪个 结构类 来控制建议框容器。

所以，我尝试了所有三个，ui-widget 类，ui-widget-content 类和 Menu documentation page 中的 ui-menu 类，用于 theming the autocomplete menu，就像这样，一个一个都没有改变任何东西。

.suggestionBox {
    background-color: red;
}



$("#txtCategory").autocomplete({

    ... // other options

    classes: {
        "ui-widget": "suggestionBox"
        // "ui-widget-container": "suggestionBox"
        // "ui-menu": "suggestionBox"
    }
});

Answer 1

经过一番痛苦的调试，我找到了所有问题的答案。其中一些可能很明显，但由于我犯了错误，我想还有很多人可能会。

确保正确下载 jQuery UI

我只在我的 HTML 页面中复制了以下脚本标记。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

这还不够。如果你想应用主题，jQuery UI 会附带一些 CSS 文件。此外，可以配置您将下载的 jQuery JavaScript 文件中的哪些控件，就像 Bootstrap 一样。

愚蠢的我，愚蠢的你，过去我们会这样做很多次，但忘记了。因此，转到Downloads page 并选中您想要使用的任何控件的复选框，然后在页面底部选择您想要的主题。然后，点击下载。

从今天开始，这应该会为您提供以下内容，您需要将其移动到您喜欢的任何项目文件夹层次结构中：

1. jquery-ui.min.js（和一个未缩小的 JavaScript 文件供您阅读）
2. jquery-ui.structure.min.css（和一个未缩小的 CSS 文件）
3. jquery-ui.theme.min.css（和未缩小的）：这是应用主题所必需的。这里是 jQuery UI CSS 框架的 ui-autocomplete 和 ui-menu 等所有类所在的位置。
4. jquery-ui.css
5. images：jQuery UI 需要此文件夹来显示项目符号等的图像。将其复制到放置 jQueryUI CSS 文件的文件夹中。
6. external：包含 jquery 的文件夹。由于 jQuery UI 是基于 jQuery 的，因此您的项目中需要使用 jquery。如果您的项目中已经引用了 jQuery 文件，则不需要此文件夹。

正确获取position

通过我的设置，我告诉它将建议框的左上角与控件#txtCategory 的左上角对齐。所以结果会是这样的：

我需要更改它以在#txtCategory 控件的左下角 处显示建议框的左上角，如下所示：

var autoComplete = $("#txtCategory").autocomplete({
    
    ...
    
    position: {
        my: "left top",
        at: "left bottom", // changed from "left top"
        of: "#txtCategory",
        collision: "fit" // this takes care of the width
    }
    
    ...
});

所以，这样看起来不错：

改变外观

昨天将近 4 个小时，没有任何效果。我尝试从控件初始化程序中删除 classes 对象声明，并尝试稍后使用以下内容指定它，但它们似乎都没有改变外观。

var autoComplete = $("#txtCategory").autocomplete( {
...
};

// This did not work either
autoComplete.autocomplete("option", "classes.ui-autoComplete", "myCustomClass");

// And neither did this
autoComplete.option("classes.ui-autocomplete", "myCustomClass");

然后我尝试通过 jQuery 本身设置css，但这也不起作用。

// Did not work
autoComplete.css("font-size", "1.4rem");

// Neither did this
autoComplete.css( {
  "font-size": "1.4rem", 
  ... // other CSS rule declarations
});

当然，这些是行不通的，因为我们在 jQuery 的 document.ready 方法中指定了这些声明，这在加载文档时发生。但是，建议框是在很久以后动态添加的。因此，在将动态内容（即建议框）添加到文档后立即添加这些声明是有意义的。但是，我们没有添加建议框。 JQuery UI 是。

为了确保此功能不完整，我尝试仅隔离这段代码以将自动完成功能放入单独的示例中，并且其 CSS 可以正常工作。

所以，在经历了更多痛苦的调试之后，这里有帮助。

1. 重启 Visual Studio

   我从昨天开始进行 Visual Studio 会话。显然，Visual Studio 缓存了一些东西。我只能在没有任何团结的情况下推测这一点，因为当我检查应用于建议框元素的 CSS 类时，我自己的 customClass 甚至没有出现在 Rules 部分中。

重新启动 Visual Studio 后，我的类开始出现在元素的规则集中。这是一种解脱。但是，该元素仍然没有应用我对名为 override-autocomplete 的自定义类的定义。

1. 确保您自己的 CSS 文件声明出现在jQuery UI CSS 文件之后

   我更改了我的 CSS 声明的顺序，以便我自己的 CSS 文件声明出现在 jQuery UI 之后，并且一切正常。

   事情开始起作用了。