Sometimes, using an array as the source of data for autocomplete widgets isn't the best option. For example, if we already have a select element in our user interface, it would make sense to reuse the options in that element to make an autocomplete. Otherwise, we would have to not only design some new code to build the array data source, but we would also have to remove the existing select element.
Let's put together some basic markup for this example. Typically, the autocomplete widget expects an input as its element. Instead, we're going to give it a select element with some simple options.
<div>
<label for="autocomplete">Items: </label>
<select id="autocomplete">
<option>First Item</option>
<option>Second Item</option>
<option>Third Item</option>
<option>Fourth Item</option>
</select>
</div>