禁用 jQuery 自动完成中的选项？

Question

我正在使用以下 jquery 根据 php 脚本返回的值创建自动完成菜单。

这些是 PHP 返回的值。

["Site 4","Site 2","Site 1","*************","Site 6","Site 7","Site 0"]

这是我的 jquery 自动完成：

$( '#site' ).autocomplete({
    source: 'siteCheck.php',
    autoFocus: true, 
    minLength: 1,
    select: function( event, ui ) {
        $('#site').val(ui);
    }
});

此 returns 正确的结果将被筛选并显示 ************* 选项。但是，我想将该选项设置为 BOLD 并停止将其从列表中 selected。

这可能吗？我曾尝试使用 jquery 来禁用 select 选项，但这似乎没有任何作用。

这不是另一张票的副本，他们询问如何在特定数量的结果显示后禁用条目。我想禁用一个特定的条目。

Answer 1

我已经在 jQuery 的官方网站上修改了 one the examples。它应该足够简单以适应您的数据。

工作原理如下：

数据数组 (projects) 中的属性 disabled 告诉自定义呈现逻辑是否禁用选项。
如果元素 disabled 设置为 true，我已自定义渲染器以在选项上设置 class ui-state-disabled。它还有助于将 background-color 设置为灰色，将 font-weight 设置为粗体。
然后在 focus 事件处理程序上，您 return false 如果该项目被禁用。这可以防止 jQuery 在您向下导航时将项目填充到输入中。
最后，在 select 处理程序上，再次防止根据 disabled 属性.[=25= 的值选择值]

var projects = [{
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png",
    disabled: false
  },
  {
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png",
    disabled: true
  },
  {
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png",
    disabled: false
  }
];


$("#project").autocomplete({
    minLength: 0,
    source: projects,
    focus: function(event, ui) {
      if(ui.item.disabled) {
        console.log("Preventing focus.");
        return false;
      } else {
        return true;
      }
    },
    select: function(event, ui) {
      if(!ui.item.disabled) {
        $("#project").val(ui.item.label);
      } else {
        console.log("Preventing selection.");
      }
      return false;
    }
  })
  .autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append("<div class='"+(item.disabled ? 'ui-state-disabled' : '')+"'>" + item.label + "<br>" + item.desc + "</div>")
      .appendTo(ul);
  };

.ui-menu-item-wrapper.ui-state-disabled {
  background-color: #aaa;
  font-weight: bold;
}

<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<input id="project">

禁用 jQuery 自动完成中的选项？

Disable an option in jQuery Autocomplete?

javascript

jquery

jquery-ui-autocomplete