首页 > 解决方案 > 特定响应值上的 jquery 自动完成样式列表项

问题描述

谁能给我一个 jquery ui-autocomplete 案例的代码示例:

如果我回来,例如:“没有条目”作为答案,我想设置列表条目的样式(.ui-autocomplete .ui-menu-item a)(例如红色)。

所以这是我的自动完成处理程序

$('#id').autocomplete({
    source: function(request, response) {
       $.getJSON("file.php", {
           data1: "somedata",
           data2: "somethingelse"
       }, response);
    },
    minLength:0,
    open: function() {
       $(this).attr('state', 'open')
       $(this).autocomplete("widget").css({ "width": 267 });
    },
   close: function () { $(this).attr('state', 'closed'); autocomplete_land(); },
   select: function(event, ui){ $(this).css('background-color', '#5582cb').css('color', '#fff'); }
})
.focus(function () {
   if ($(this).attr('state') != 'open') {
      $(this).autocomplete("search");
   }
});

这是 jquery 生成的自动完成列表:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 338px; left: 850px; display: none; width: 267px;">
   <li class="ui-menu-item" role="menuitem">
      <a class="ui-corner-all" tabindex="-1">some data</a>
   </li>
</ul>

所以当我返回“no entry”时,它应该是这样的(红色:style="color:#ff0000;")

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 338px; left: 850px; display: none; width: 267px;">
   <li class="ui-menu-item" role="menuitem">
      <a class="ui-corner-all" tabindex="-1" style="color:#ff0000;">no entry</a>
   </li>
</ul>

非常感谢

标签: javascriptjqueryautocomplete

解决方案


推荐阅读