JQuery Autocomplete: changing look and feel

Question

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

Answer 1

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