Question

我已经制作了一个javascript自动完成功能，但我在CSS样式方面遇到了麻烦。我应该在#keywords中包含哪些基本内容？这是JS代码：

<script>
$(document).ready(function() {
  $("#keywords").autocomplete({
    source: keywordList,
    minLength: 2,

  });
});
</script>

Answer 1

您可能知道，选择器用于指定您要操作的标签。在这种情况下，将它们转换为自动完成字段。标签的样式与javascript代码几乎没有关系，更多的是CSS和您可能需要的任何附加资源（例如图像）。虽然可以使用javascript来编写样式，但它不是在选择器字符串中完成的。

CSS

JQuery会将此类添加到它转换为自动完成的代码：ui-autocomplete-input。您应该能够在您应该使用JQuery UI获得的主题中找到CSS中该类的定义。如果你没有使用它，你也可以写一个yourslef，就像这样：

<style type="text/css">
    .ui-autocomplete-input
    {
        /*your style here*/
    }
</style>

我不知道你想要它的样子，所以我无法弄清楚要放在那里的东西。

无论如何，您可以查看w3schools.com CSS Tutorial并找出要使用的CSS。

请注意，CSS中的.ui-autocomplete-input是一个类选择器，您也可以使用任何其他选择器，例如：

.class /*to match a class*/
{
     /*your style here*/
}

#id /*to match an id*/
{
     /*your style here*/
}

body /*to match a tag name*/
{
     /*your style here*/
}

body > table /*to match a direct child*/
{
     /*your style here*/
}

body table /*to match a child (no matter how many levels inside)*/
{
     /*your style here*/
}

这些是您在JQuery中使用的相同选择器，例如$("#keywords")。

如果要使用jquery更改标记的样式，可以编写如下代码：

$("#keywords").css('border', '1px solid black');

但如果风格不会改变，最好使用CSS。

注意：请记住指定脚本类型：<script type="text/javascript"> /*code*/ </script>

自动完成搜索CSS样式

1 个答案:

CSS