如何將樣式應用於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方面。

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

來源

2017-08-31 Atma

看你鏈接的頁面上的「主題化」部分。 http://api.jqueryui.com/autocomplete/ – ivo

下拉列表是一個ui菜單。有關主題和樣式類的詳細信息，請參見此頁http://api.jqueryui.com/menu/ – ivo

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

來源

2017-08-31 23:27:03 Atma

自動完成的下拉是li元素與ui-menu-item類。

請嘗試在下面的代碼段中使用「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">

來源

2017-08-31 23:30:35

請注意，如果您使用的是其他jquery ui組件，則可能需要限制ui-menu-item的樣式到那些用於自動完成的人。 – ivo

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

回答

相關問題