JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<div class='test-search'>
    <label class='label-heading' for='testSearch'>Search Heading</label>
    <input type='text' id='testSearch' placeholder='Search for things and stuff'/>
</div>
<div>
    <ul role='listbox' class='test-list'>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 1</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 2</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 3</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 4</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 5</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 6</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 7</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 8</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 9</span></li>
        <li role='option' class='list-item' tabindex='0'><span class='name'>Name 10</span></li>
    </ul>
</div>

CSS

ol,ul {
    list-style:none;
}
.list-item {
    background-color: #E6E8FA;
}
.list-item:focus {
    background-color: #D1EEEE;
}

JavaScript

config = {
    autoFocus: true,
    source: ['Name 1', 'Name 2', 'Name 3', 'Name 4', 'Name 5', 'Name 6', 'Name 7', 'Name 8', 'Name 9', 'Name 10']
};
$('#testSearch').autocomplete(config);