无法获得 jquery 自动完成样式

发布于 2024-11-19 09:18:57 字数 1014 浏览 5 评论 0原文

我有 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，在编写问题时忽略了这一点）

原文

I have the jquery autocomplete example working on a test page, but can't seem to get the dropdown list styled. It just shows up as an ordinary ul with li items (not the white background box with a list as in the example). I have tried this alone and with the redmond theme, any thoughts on what I might be doing wrong? I see the redmond stylesheets in firebug, so the page is loading them.

js (working)

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

css/js includes

<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"/>

here is the input:

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

(edit: added CSS, overlooked this when writing the question)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜声 2024-11-26 09:18:57

下载主题并包含主题的 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;
}

Download a theme and include the theme's CSS.

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

You can see the themes here, and just download them from the download page by selecting the theme you want in the right-hand bar..

Edit: It looks like you're using the old jQuery auto-complete plug-in which has been discontinued. You can try the following CSS for that if you wish. I STRONGLY recommend you use the jQuery UI autocomplete however.

/* 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;
}

回复收藏 0 原文