Geek Answers Handbook

Cannot get jquery autocomplete in style

I have a jquery autocomplete example that runs on a test page, but doesn't seem to be able to get a dropdown. It just displays as a regular ul with li elements (and not on a white background with a list, as in the example). I tried this alone and with a redmond theme, any thoughts on what I might be doing wrong? I see redmond stylesheets in firebug, so the page loads them.

js (working)

$(document).ready(function() { $("input").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); });

css / js includes

 <script src="/public/javascripts/jquery-1.6.2.js'"></script> <script src="/public/javascripts/jquery-ui-1.8.14.custom.min.js"></script> <script src="/public/javascripts/ac.js"></script> // where the above js is <script src="/public/javascripts/jquery.tools.min.js"></script> <link rel="stylesheet" type="text/css" media="print" href="/public/stylesheets/redmond/jquery.ui.all.css"/>

here is the input:

 <input name="searchString" type="text" class="searchbox ui-autocomplete" id="autocomplete"/>

(edit: added CSS, skipped this when writing the question)

+4
source share
2 answers

Download the theme and enable the CSS theme.

 <link rel="stylesheet" href="/public/css/jquery-ui.css" type="text/css">

You can see the themes here and just download them from the download page by selecting the desired theme in the right panel.

Edit: it looks like you are using an old jQuery automatically terminating plugin that has been discontinued. You can try the following CSS for this if you want. I highly recommend you use jQuery UI autocomplete.

 /* Autocomplete styles */ .ac_results { padding: 0px; border: 1px solid black; background-color: white; overflow: hidden; z-index: 99999; } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } .ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/ font: menu; font-size: 12px; /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */ line-height: 16px; overflow: hidden; } .ac_loading { /* loader image */ background: white url('indicator.gif') right center no-repeat; } .ac_odd { background-color: #eee; } .ac_over { background-color: #0A246A; color: white; }
+5
source

Use the theme below in your application, and it should work (add it to your main page / template OR on the page where you implement the autocomplete function.)

jquery.ui.theme.css

-1
source

More articles:


All Articles