JQuery UI Autocomplete showing as bullets

Question

The JQuery UI Demo page for autocomplete (link) has a nice looking search box and drop down with nice colors and highlights and such. When I implement it for myself, I end up with a bulleted list. How do I get my drop down of suggestions to look like theirs?

A few notes/code fragments:

• I'm working in .NET land, so I'm using the <asp:ScriptManager> tag with <asp:ScriptReference>s inside it to get the hosted jquery.min.js (1.4.2) and jquery-ui.min.js (1.8.1) files from Google.
• My input box is fairly simple: <div class='ui-widget'> <label for="terms">Term: </label> <input id="terms" class="ui-autocomplete-input"> </div>
• My autocomplete looks like: $(""#terms"").autocomplete({source:""GetAttributesJSON.aspx"",minLength:2});

I get the correct data back, so that's not the issue. I just want fancy graphics. Any thoughts would be much appreciated.

Pantagruel

Are you also linking to the jQuery UI CSS files? – Antiserum

@Pantagruel - build a theme, and include it: jqueryui.com/themeroller and problem solved. They appear as bullets because without the UI CSS they look like typical LIs – Fokker

Answer 1

As Karim79 and Zack has mentioned you need to style the list. You can create your own theme and download it. Further information can be found here. Optionally you can use one of the many pre-built themes and include it in your document instead. Just head to the Jquery Download Page and select the theme you want.

Then just include the .css file

<link type="text/css" href="http://yourwebsite.com/css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />   

Tager

Aye there's the rub. Thanks! – Pantagruel

This worked well for me: <link href="~/lib/jqueryui/themes/base/jquery-ui.css" rel="stylesheet" /> – Mimesis