не удается получить автозаполнение в стиле jquery

Question

У меня есть пример автозаполнения jquery, работающий на тестовой странице, но, похоже, не получается стилизовать выпадающий список Он просто отображается как обычный ul с элементами li (не белый фон со списком, как в примере). Я попробовал это в одиночку и с темой Редмонда, есть мысли о том, что я могу делать неправильно? Я вижу таблицы стилей Redmond в Firebug, поэтому страница загружает их.

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, пропущен при написании вопроса)

Answer 1

Загрузите тему и включите CSS темы.

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

Вы можете просмотреть темы здесь и просто загрузить их со страницы загрузки , выбравнужная тема в правой панели ..

Редактировать: Похоже, вы используете старый плагин jQuery auto-complete , который был прекращен.Вы можете попробовать следующий CSS для этого, если хотите.Однако я настоятельно рекомендую вам использовать автозаполнение пользовательского интерфейса jQuery.

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

Answer 2

Используйте указанную ниже тему в вашем приложении, и она должна работать (добавьте ее в свою главную страницу / шаблон ИЛИ на страницу, где вы реализуете функцию автозаполнения.)

jquery.ui.theme.css