如何将样式应用于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自动完成下拉

回答

相关问题