Автозаполнение JQuery: изменение внешнего вида

Question

Я всегда был бэкэнд-разработчиком с Java и Python.Я использовал JQuery для таких вещей, как проверка, таблицы данных и основные задачи javascript.Я всегда использовал CSS по умолчанию для Jquery.

Теперь мне поручено создать виджет автозаполнения, который будет выглядеть как автозаполнение в LinkedIn.В том смысле, что результаты должны быть сгруппированы по категориям, и, если возможно, изображение будет отображаться слева от элемента списка.Я понятия не имею, как изменить классы CSS темы пользовательского интерфейса, чтобы сделать это.Мой опыт работы с CSS минимален.

Любое руководство, безусловно, ценится.

спасибо

Сэм

ps Основываясь на первом ответе, яизменив это следующим образом:

Я уже использовал firebug, чтобы увидеть, что результаты автозаполнения создаются в:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 114px; left: 55px; display: block; width: 176px;">
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Java</a></li>
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">JavaScript</a></li></ul>

Но где это генерируется?И как мне изменить то, что генерируется?

Answer 1

Я бы начал с работы автозаполнения, а затем отключил CSS-файл jQuery UI.Это заставит диалог автозаполнения выглядеть завершенным s * it:)

Теперь медленно начинайте реализовывать стили, которые вы видите при использовании инспектора в Chrome, IE или Firebug в FF.

Если вы застряли, вы всегда можете найти стиль из оригинального jQueryUI CSS, скопировать его в файл таблицы стилей и затем отредактировать настройки.Это, безусловно, поможет вам лучше изучить CSS, а также вы получите правильный внешний вид для вашего автозаполнения.

Что касается автозаполнения LinkedIn, я бы посоветовал вам снова использовать инспектора или firebug для проверкистиль на сайте, и просто скопируйте его и осмотрите его.

Надеюсь, вы начнете!Удачи:)

Answer 2

Я проводил поиск на странице API JQuery для плагина автозаполнения, и есть некоторые функции, которые можно использовать для создания макета возвращаемого результата, который можно найти в JQuery Интерфейс API автозаполнения интерфейса пользователя

Например:

formatItem -->  Function    

По умолчанию: Предполагается, что одна строка содержит одно значение. Предоставляет расширенную разметку для элемента. Для каждой строки результатов будет вызываться эта функция. Возвращенное значение будет отображаться внутри элемента LI в списке результатов. Автозаполнение предоставит 4 параметра: строку результатов, положение строки в списке результатов (начиная с 1), количество элементов в списке результатов и поисковый запрос.

Мне все еще нужно выяснить детали того, как его использовать, и я обновлю ответ, как только сделаю