无法为jQuery自动完成设置样式

Question

无法为jQuery自动完成设置样式

5

我在测试页面上成功使用了jquery自动完成示例，但似乎无法将下拉列表样式化。它只显示为普通的ul和li项目（不像示例中的白色背景框和列表）。我已经尝试过单独使用和与redmond主题一起使用，您认为我可能做错了什么吗？我在firebug中看到了redmond样式表，所以页面正在加载它们。

js（工作）

$(document).ready(function() {
    $("input").autocomplete({
        source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
    });
});

css/js 包含

<script src="/public/javascripts/jquery-1.6.2.js'"></script>
<script src="/public/javascripts/jquery-ui-1.8.14.custom.min.js"></script>
<script src="/public/javascripts/ac.js"></script> // where the above js is 
<script src="/public/javascripts/jquery.tools.min.js"></script>

<link rel="stylesheet" type="text/css" media="print" href="/public/stylesheets/redmond/jquery.ui.all.css"/>

这是输入：

<input name="searchString" type="text" class="searchbox ui-autocomplete" id="autocomplete"/>

（编辑：添加了CSS，写问题时忽略了这一点）

- Joseph Burns

你的包含文件中是否缺少一两个CSS文件？我只看到JS文件。 - kasdega

2个回答

-1

在您的应用程序中使用以下主题，它应该可以工作（将其添加到您的主页面/模板或实现自动完成功能的页面上）。

jquery.ui.theme.css

- Shradz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Doe · Accepted Answer

下载主题并包含主题的CSS。

<link rel="stylesheet" href="/public/css/jquery-ui.css" type="text/css">

您可以在此处查看主题，并从下载页面下载所需的主题。只需在右侧栏中选择您想要的主题即可。

编辑：看起来您正在使用已经停用的旧版jQuery 自动完成插件。如果您愿意，可以尝试以下CSS。但是，我强烈建议您使用jQuery UI自动完成插件。

/* Autocomplete styles */
.ac_results {
        padding: 0px;
        border: 1px solid black;
        background-color: white;
        overflow: hidden;
        z-index: 99999;
}

.ac_results ul {
        width: 100%;
        list-style-position: outside;
        list-style: none;
        padding: 0;
        margin: 0;
}

.ac_results li {
        margin: 0px;
        padding: 2px 5px;
        cursor: default;
        display: block;
        /*
        if width will be 100% horizontal scrollbar will apear
        when scroll mode will be used
        */
        /*width: 100%;*/
        font: menu;
        font-size: 12px;
        /*
        it is very important, if line-height not setted or setted
        in relative units scroll will be broken in firefox
        */
        line-height: 16px;
        overflow: hidden;
}

.ac_loading {
        /* loader image */
        background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {
        background-color: #eee;
}

.ac_over {
        background-color: #0A246A;
        color: white;
}