После небольшой мучительной отладки я нашел ответ на все мои вопросы.Некоторые из них могут показаться неловко очевидными, но, поскольку я допустил ошибку, я думаю, что многие другие могли бы.
Убедитесь, что вы правильно загрузили jQuery UI
Я скопировал толькоследующий тег сценария на моей странице HTML.
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Этого недостаточно.JQuery UI поставляется с некоторыми файлами CSS, если вы хотите применять темы.Кроме того, то, что элементы управления входят в загружаемый вами jQuery-файл JavaScript, можно настроить точно так же, как Bootstrap.
Глупый я, и, конечно же, мы делали это много раз в прошлом, но забыли.Итак, перейдите на страницу Загрузки и установите флажки для тех элементов управления, с которыми вы хотите играть, и в нижней части страницы выберите нужную тему.Затем нажмите Загрузить .
На сегодняшний день это должно дать вам следующее, что вам нужно будет перейти в иерархию папок ваших проектов куда угодно:
- jquery-ui.min.js (и непроизведенный файл JavaScript для чтения)
- jquery-ui.structure.min.css (и непроизведенный файл CSS)
- jquery-ui.theme.min.css (и unminified): это необходимо для применения тем.Здесь находятся все классы, такие как
ui-autocomplete и ui-menu CSS-структуры jQuery UI. - jquery-ui.css
- images: эта папка необходима для того, чтобы пользовательский интерфейс jQuery моготображать изображения для маркеров и т.п.Скопируйте его в папку, в которую вы помещаете ваши CSS-файлы jQueryUI.
- external: Папка, содержащая jquery.Поскольку пользовательский интерфейс jQuery основан на jQuery, вам нужен jquery в вашем проекте.Если у вас уже есть файл jQuery, на который есть ссылки в вашем проекте, вам не нужна эта папка.
Получите position right
СВ настройках, которые у меня были, я говорил, чтобы они совмещали верхний левый угол окна предложений с верхним левым краем элемента управления #txtCategory.Таким образом, результат будет выглядеть следующим образом:
Мне нужно было изменить это, чтобы отображать верхний левый угол поля для предложений в внизу-left элемента управления #txtCategory, вот так:
var autoComplete = $("#txtCategory").autocomplete({
...
position: {
my: "left top",
at: "left bottom", // changed from "left top"
of: "#txtCategory",
collision: "fit" // this takes care of the width
}
...
});
Итак, это будет выглядеть так:
Изменение внешнего вида
Вчера почти 4 часа ничего не работало.Я попытался удалить объявление объекта classes из инициализатора элемента управления и попытался указать его позже, используя следующее, но ни один из них, похоже, не изменил внешний вид.
var autoComplete = $("#txtCategory").autocomplete( {
...
};
// This did not work either
autoComplete.autocomplete("option", "classes.ui-autoComplete", "myCustomClass");
// And neither did this
autoComplete.option("classes.ui-autocomplete", "myCustomClass");
Затем я попытался установить css через jQueryСам по себе, но это тоже не сработало.
// Did not work
autoComplete.css("font-size", "1.4rem");
// Neither did this
autoComplete.css( {
"font-size": "1.4rem",
... // other CSS rule declarations
});
Конечно, это не сработает, потому что мы указываем эти объявления в методе jQuery document.ready, который происходит при загрузке документа.Тем не менее, поле для предложений добавляется динамически гораздо позже .Поэтому было бы целесообразно добавить эти объявления , как только динамический контент, то есть поле предложения, будет добавлен в документ.Однако мы не добавляем поле для предложений.Пользовательский интерфейс JQuery:
Чтобы убедиться, что эта функция не была неполной, я попытался выделить только этот фрагмент кода, чтобы сделать автозаполнение отдельным примером, и его CSS работал.
Такпосле гораздо более мучительной отладки вот что помогло.
Перезапустите Visual Studio
У меня сессия Visual Studio продолжалась со вчерашнего дня.Очевидно, Visual Studio кеширует некоторые вещи.Я могу только догадываться об этом без какой-либо солидарности, потому что когда я проверял свои классы CSS, которые применялись к элементам ящика для предложений, мои собственные customClass даже не появлялись в разделе Правила .
После перезапуска Visual Studio мой класс начал появляться в наборе правил элемента.Это было облегчением.Тем не менее, элемент все еще не применил мое определение моего пользовательского класса с именем override-autocomplete.
Убедитесь, что ваше собственное объявление CSS-файла появляется после jQuery UI CSS-файлов
Я изменил порядок своих объявлений CSS, чтобы мое собственное объявление файла CSS появилось после интерфейса jQuery UI, и все это заработало.
И вещь начала работать.
