JSFiddle - React, Tailwind, and code Playground

by Daniel DeGroff

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<script src="https://rawgithub.com/robotdan/jquery-ui/bug_9695/ui/jquery.ui.autocomplete.js"></script>

<pre>
Recreate:

1. Start typing the letter a
2. Key down to any of the disabled items
3. Press [ENTER] or [TAB]
4. Ensure the menu is not dismissed and you don't receive an alert
5. You may select the enabled item by using [ENTER] or [TAB]
</pre>
<input id="tags">

JavaScript

$( "#tags" ).autocomplete({
  select: function (event, ui) {
	if ( ui.item.label !== "JavaScript" ) {
		alert( "You have selected " + ui.item.label + " but you shouldn't have!" );
	}
  },
  source: [
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ]

}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {

	var li = $( "<li>" )
    	.append( $( "<a>" ).text( item.label ) )
    	.appendTo( ul );

	if ( item.label !== "JavaScript" ) {
		li.addClass( "ui-state-disabled" );
	}

	return li;
};