Question

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

我要更改的两件事是：

它的位置，使其与所服务的文本框一样宽。还有
其字体大小。

到目前为止，这是我的想法。

位置

我在文档以及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的主题，但是我不确定应使用哪个结构类来控制建议框容器。

因此，我尝试了Menu documentation page中的ui-widget类，ui-widget-content类和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并选中您要使用的控件的复选框，然后在页面底部选择所需的主题。然后，点击下载。

从今天开始，应该为您提供以下内容，您将可以随时根据需要将其移至项目文件夹层次结构：

jquery-ui.min.js（以及供您阅读的未压缩JavaScript文件）
jquery-ui.structure.min.css（和未压缩的CSS文件）
jquery-ui.theme.min.css（且未最小化）：这是应用主题所必需的。这是jQuery UI CSS框架的所有类（例如ui-autocomplete和ui-menu）所在的地方。
jquery-ui.css
images：jQuery UI需要此文件夹才能显示要点等的图像。将其复制到放置jQueryUI CSS文件的文件夹中。
外部：包含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
    }

    ...
});

所以，看起来像这样：

更改外观

昨天将近四个小时，没有任何反应。我尝试从控件初始化程序中删除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起作用了。

因此，经过大量痛苦的调试之后，这才有所帮助。

重新启动Visual Studio

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

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

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

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

事情开始起作用。

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

1 个答案: