'how to apply style to jquery autocomplete dropdown

I'm using jquery autocomplete.

I have set it to connect with a service and bring back records:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {

    $( "#tags" ).autocomplete({
      source: "/autocomplete/",
      minLength: 3,
      select: function( event, ui ) {

      }
    });
  } );
</script>

The dropdown list comes back without any style.

The documentation here: http://api.jqueryui.com/autocomplete/ only focuses on the JS aspect.

How can I apply style to the dropdown of the returned results?

javascriptjquerycssjquery-ui-autocomplete


Solution 1:[1]

Here is a pretty good example I found here: JQuery autocomplete result style

.ui-autocomplete { position: absolute; cursor: default; background:#CCC }   

/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

Solution 2:[2]

The autocomplete dropdown are li elements with class ui-menu-item.

Try with "H" in the snippet below.

$( "#tags" ).autocomplete({
  source: ["Hello.","How are you?","Hi!"],
  minLength: 1,
  select: function( event, ui ) {

  }
});
.ui-autocomplete .ui-menu-item{
  font-style:italic;
  color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input id="tags">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Atma
Solution 2

Related Questions