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

自动填充下拉列表是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">

如何将样式应用于jquery自动完成下拉列表

2 个答案: