更改JQuery UI自动完成的5个第一个最佳匹配的css

Question

我有一个使用Jquery UI Autocomplete自动完成的搜索栏，它运行正常。 我想要做的是'HighLight'意味着在自动完成下拉列表中更改5首匹配的css（字体，背景颜色等）。因此，如果我从搜索词中得到100个结果，我想先显示5个更清晰，然后就是现在。我不知道该怎么做，有谁知道谁可以帮我吗？

这是我正在使用的图片和代码。

$(document).ready(function(){
 $('#search-id').autocomplete({
  source:"search.php",
  minLength:1,
  select:function(event,ui){
  var url = 'assets.php?serial=' + ui.item.serial;
  document.location = url;
},
html:true,
open:function(event,ui){
  $('.ui-autocomplete').css({
    'z-index':'1000',
    'max-height':'200px',
    'overflow-y':'auto',
    'overflow-x':'hidden'
  });
},        
})
 $.ui.autocomplete.prototype._renderItem = function (ul, item) {
 return $("<li></li>")
   .data("ui-autocomplete", item)
   .append( "<a>" + item.serial + ' | ' + item.type + ' | '
   + item.modell + '<br>' + item.installationsdatum + ' | ' 
   + item.placering +  "</a>" )
   .appendTo(ul);
};
 });

祝你好运 卡欣

Answer 1

您可以通过以下方式使用CSS定位自动填充列表项目：

li:nth-child(-n+5) {
    background:red;
}

<强> jsFiddle example