Disable an option in jQuery Autocomplete?

Question

I'm using the following jquery to create an autocomplete menu from the values returned by a php script.

These are the values returned by PHP.

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

and this is my jquery for the autocomplete:

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

This returns the correct results to screen and shows the ************* option. However I'd like to make that option BOLD and stop it being selected from the list.

Is that possible? I have tried to use jquery to disable the select option but that doesn't seem to do anything.

This isn't a duplicate of the other ticket, they are asking how to disable entries after a specific number of results show.. I want to disable ONE specific entry.

Answer 1

I've modified one the examples on jQuery's official site. It should be simple enough to adapt it for your data.

Here's how it works:

1. The property disabled in data array (projects) tells the custom rendering logic whether or not an option is disabled.

2. I have customized the renderer to set a class ui-state-disabled on the option if the element has disabled set to true. It also helps set the background-color to gray and font-weight to bold.

3. Then on the focus event handler, you return false if the item is disabled. This prevents jQuery from populating the item into the input as you navigate down.

4. Finally, on the select handler, again, you prevent the value from being selected based on the value of disabled property.

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">