YUI 3 AutoComplete: Use <select> list as a result source

Demonstrates how to use a <select> list as a result source for a YUI 3 AutoComplete instance.

by jpeter06

HTML

<div id="filterArea" class="container shadow" style="clear: both; visibility: visible; overflow: hidden; z-index: 9; top: 25px; height: 53px; ">
<table class="title" style="width:100%">
       <tbody><tr>
             <td nowrap="nowrap">Filtro</td>
        <td style="width:100%">
        </td>
        <td width="4">&nbsp;</td>
       </tr>
      </tbody></table>
    
<div class="yui3-skin-sam">
    <input id="ac-input">
    <select id="fruits">
        <option>apple</option>
        <option>orange</option>
        <option>pear</option>
        <option>kumquat</option>
    </select>
</div>
</div>
<div id="dataHeaderArea" class="container shadow" style="clear: both; visibility: visible; overflow: hidden; z-index: 9; top:45px; ">
<table class="title" style="width:100%">
       <tbody><tr>
             <td nowrap="nowrap">Datos</td>
        <td style="width:100%">
        </td>
        <td width="4">&nbsp;</td>
       </tr>
      </tbody></table>
</div>

CSS

div.container {
-moz-box-shadow: 4px 4px 5px #EEEEEE;
-webkit-box-shadow: 4px 4px 5px #EEEEEE;
box-shadow: 4px 4px 5px #EEEEEE;
padding-button: 5px;
}

div.container .title {
background: #117fbc;
}

JavaScript

Y = YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {
    Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
        resultHighlighter: 'phraseMatch',
        resultFilters: 'phraseMatch',
        resultTextLocator: 'value',
        source: Y.NodeList.getDOMNodes(Y.one('#fruits').get('options'))
    });
});