Geek Answers Handbook

JQuery autocomplete: change appearance

I have always been a third-party developer with Java and Python. I used jQuery for things like validations, data tables, and basic javascript tasks. I always used the default CSS for jQuery.

Now I am tasked with creating an Autocomplete widget that looks and feels like LinkedIn autocomplete. In the sense that the results should be grouped into categories, and, if possible, the image will be displayed to the left of the list item. I don't know how to change the CSS classes of the user interface theme for this. My CSS experience is minimal at best.

Any guidance is certainly appreciated.

thank

Sam

ps Based on the first answer, I edit this as follows:

I already used firebug to see what autocomplete results are created in:

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

But where is this generated? And how to change what is generated?

+5
source share
2 answers

I would start by working with autocomplete and then disable the jQuery jquery CSS file. This will cause the autocomplete dialog to look completely s * it :)

Now slowly start implementing the styles you see using the inspector in Chrome, IE, or Firebug in FF.

, jQueryUI CSS , . , , CSS, .

LinkedIn, firebug .

, - ! :)

+1

API JQuery Autocomplete, , , API JQuery

:

formatItem -->  Function

: , . . . LI . Autocompleter 4 : , ( 1), .

, ,

0

More articles:


All Articles