JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- This is basically the example from: http://jqueryui.com/autocomplete/#categories -->
<label for="search">Search:</label>
<input id="search" />

<h2>Reproduce Bug</h2>

<ol>
    <li>Enter any character to trigger autocomplete</li>
    <li>After 'Nothing Found!' is displayed press the DOWN key.</li>
    <li>Now there should be an JS error</li>
</ol>

JavaScript

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        $.each(items, function (index, item) {
            var li = $( "<li class='ui-autocomplete-category'><a>" + item.label + "</a></li>" );
            ul.append(li);
            li.data( "ui-autocomplete-item", item );
        });
    }
});

$("#search").catcomplete({
    delay: 0,
    source: function (request, response) {
        response([
            {
                label: "Nothing Found!",
                value: "error"
            }
        ]);
    }
});