Jquery ui autocomplete, css questions

Question

I would like to create a <ul> style that shows search results. Nevertheless, it is issued using the built-in css generated from the script. What do I need to do if, for example, I want to move the list a bit from the search box?

Answer 1

To create your own jQueryUI autocomplete theme, you need to rewrite the styles. Here is an example of all 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 the styles for all the classes you want to change. For example:

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

Remember to include the CSS AFTER JQueryUI CSS file to overwrite it.

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); } }); 

An open event gives you access to these elements that do not yet exist: \

Answer 3

What do I need to do if, for example, I want to move the list a bit from a search query?

Add the following to your .css file.

 .ui-autocomplete { /* Move the autocomplete down a bit from the search box. */ margin-top: 35px !important; /* Remove the whitespace around the individual items. */ padding: 0px; } 

If you want to change the style of individual elements, use .ui-menu-item as mentioned in Fran's answer.

If you want to change the style of the selected or hovering element in the list, you need to add the following to your .css file.

 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background-color: grey; background-image: none; padding: 0px; margin: 0px; border-radius: 0; } 

Answer 4

This does not solve your entire problem, but is convenient.

The jQuery user interface autocomplete module has a position attribute that you can configure using these settings .

Use this in combination with the CSS styles of the .ui-* classes and you can do what you want.