我有一个jquery自动完成示例在测试页面上工作,但似乎无法获得下拉列表样式。它只是显示为带有li项的普通ul(不是带有列表的白色背景框,如示例中所示)。我曾尝试过这个单独的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,在撰写问题时忽略了这一点)
答案 0 :(得分:7)
下载主题并包含主题的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;
}
答案 1 :(得分:-1)
在您的应用程序中使用以下主题,它应该有效(将其添加到您的母版页/模板中或在您实现自动完成功能的页面上。)
jquery.ui.theme.css