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);
    }
});

这会将正确的结果返回到屏幕并显示*************选项。不过，我想将该选项设为 BOLD ，并停止从列表中选择。

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

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

Answer 1

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

以下是它的工作原理：

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

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自动完成中禁用一个选项？

1 个答案: