如何將樣式應用於 jquery 自動完成下拉列表

Question

我正在使用 jquery 自動完成功能。

我已將其設置為與服務連接並帶回記錄：

<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>

下拉列表沒有任何樣式返回。

這里的文檔： http : //api.jqueryui.com/autocomplete/只關注 JS 方面。

如何將樣式應用於返回結果的下拉列表？

Answer 1

這是我在這里找到的一個很好的例子： 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;
}

Answer 2

自動完成下拉列表是具有ui-menu-item類的li元素。

在下面的代碼段中嘗試使用“H”。

 $( "#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">