自动完成搜索 CSS 样式

Autocomplete search CSS styling

本文关键字：CSS 样式 搜索      更新时间：2023-09-26

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

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

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

.CSS

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

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

我不知道你想要它是什么样子，所以我不知道该放什么。

无论如何，你可以看看 w3schools.com CSS教程，找出使用什么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>

相关文章：