无法获得 jquery 自动完成样式答案

【问题标题】：can't get jquery autocomplete styled无法获得 jquery 自动完成样式
【发布时间】：2011-09-30 21:11:40
【问题描述】：

我在测试页面上有 jquery 自动完成示例，但似乎无法设置下拉列表样式。它只是显示为带有 li 项目的普通 ul （而不是示例中的带有列表的白色背景框）。我已经单独尝试了这个，并使用了雷德蒙德主题，对我可能做错了什么有什么想法吗？我在 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，写问题时忽略了这一点）

【问题讨论】：

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

标签： jquery css jquery-ui themes

【解决方案1】：

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

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

您可以看到here 的主题，只需在右侧栏中选择所需的主题即可从download page 下载它们..

编辑：看起来您正在使用已停产的旧 jQuery auto-complete plug-in。如果您愿意，可以尝试以下 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;
}

【讨论】：

抱歉，添加了 CSS 条目（忘记在问题中添加）。当我在 firebug 中调出页面时，所有来自 redmond 主题的 css 文件都会被加载。
你在使用旧的 jQuery auto-complete plug-in 吗？如果是这样，这就是 redmond 主题不起作用的原因，我建议尝试jQuery UI autocomplete。我检查了 Redmond 主题，它有正确的 CSS 条目来主题 jQuery UI 自动完成。它应该可以工作。
感谢您的回复。我不认为我是，我分别从 jquery.com 和 jqueryui.com 中选择了 jquery 和 jquery-ui（今天早些时候）。我更改了语法以匹配您在 your link 中发布的示例的语法，但结果仍然相同，一个没有样式的普通 'ole
你从哪里得到 ac.js？我假设 ac.js 是您的自动完成插件。如果是，那么它很可能是我告诉您的旧版本，因为 jQuery UI 自动完成功能内置在 jQuery UI 本身中，并且只需要在您自定义下载组件时选择该组件即可使用。
ac.js 就是上面的 javascript。我更新了它以反映示例，并将输入的 id 更改为“标签”以尝试示例中的方法，没有运气

【解决方案2】：

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

jquery.ui.theme.css

【讨论】：