JQuery Autocomplete: changing look and feel

I've always been a backend developer with Java and Python. I've used JQuery for things like validation, data-tables, and core javascript tasks. I've always used the default CSS for Jquery.

I am now tasked with creating an Autocomplete Widget that looks and feels like LinkedIn's autocomplete. In the sense that results should be grouped into categories, and if possible, an image would show to the left of the list item. I have no clue how to change the UI theme's CSS classes to do this. My CSS experience is minimal at best.

Any guidance is certainly appreciated.

thanks

Sam

p.s. Based on the first answer, I'm editing this as follows:

I've used firebug already to see that the autocomplete results are created into:

<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开发者_如何学Python>
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">JavaScript</a></li></ul>

But where is that generated? And how do I change what's generated?

I'd start out by getting the autocomplete thing to work, and then disable the jquery UI CSS-file. This will cause the autocomplete-dialog to look complete s*it :)

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

If you're stuck you can always look up the style from the original jQueryUI CSS and copy it into your stylesheet file and then edit the settings. This will definitely help you learn CSS better, and also you'll get the right look and feel for your Autocomplete.

As for the LinkedIn autocomplete, I'd suggest you use the inspector or firebug again to inspect the style on the site, and just copy it and inspect it.

Hope you get off to some start! Good luck :)

I've been doing some searching on the API page of JQuery for the Autocomplete plugin, and there are some functions that one can use in order to effect the layout of the returned result, which can be found on JQuery UI Autocomplete API Docs

For example:

formatItem -->  Function    

Default: Assumes that a single row contains a single value. Provides advanced markup for an item. For each row of results, this function will be called. The returned value will be displayed inside an LI element in the results list. Autocompleter will provide 4 parameters: the results row, the position of the row in the list of results (starting at 1), the number of items in the list of results and the search term.

I still have to work out the details of how to use it, and I'll update the answer once I do