jquery ui autocomplete, css questions [closed]

Question

I would like to style the <ul> which shows the search results. However, it gets styled with inline css generated from the script. What do I need to do if I, for example, want to move the list down a bit from the search box?

Answer 1

To make your own JQueryUI Autocomplete theme, you need to rewrite styles. Here is an example of all the classes:

<input class="ui-autocomplete-input"/>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

So, your CSS file should overwrite styles for all the classes that you want to change. For example:

.ui-menu-item{
   color: blue;
   font-weight: bold;
}

Don't forget to include your CSS file AFTER JQueryUI CSS file to force the overwritten.

Answer 2

after hours of searching, i came up with something like this:

var ac = $("#tags").autocomplete({
    source: availableTags,
    open: function (event, ui) {
         $(".ui-menu").css("width", 300);
    }
});

Open event gives You access to this elements that does not exist before :\