Question

My auto YUI autocomplete zindex is off. How can I force the autocomplete DIV to the top.

Below I am using a standard template for YUI:

YAHOO.util.Event.onDOMReady(function(){
YUI().use(“autocomplete”, “autocomplete-filters”, “autocomplete-highlighters”, function (Y) {
var inputNode = Y.one(‘#name’),
tags = [
‘css’,
‘css3’,
‘douglas crockford’,
‘ecmascript’,
‘html’,
‘html5’,
‘java’,
‘javascript’,
‘json’,
‘node.js’,
‘pie’,
‘yui’
],
lastValue = ”;

        inputNode.plug(Y.Plugin.AutoComplete, {
                activateFirstItem: true,
                minQueryLength: 0,
                queryDelay: 0,
                source: tags,
                resultHighlighter: 'startsWith',
                resultFilters: ['startsWith']
        });

        // When the input node receives focus, send an empty query to display the full
        // list of tag suggestions.
        inputNode.on('focus', function () {
                inputNode.ac.sendRequest('');
        });

        // When there are new AutoComplete results, check the length of the result
        // list. A length of zero means the value isn't in the list, so reset it to
        // the last known good value.
        inputNode.ac.on('results', function (e) {
                if (e.results.length) {
                        lastValue = inputNode.ac.get('value');
                } else {
                        inputNode.set('value', lastValue);
                }
        });

        // Update the last known good value after a selection is made.
        inputNode.ac.after('select', function (e) {
                lastValue = e.result.text;
        });
});

});

Answer 1

Simply to put the z-index in the css. Setting via JS used to be allowed, but as of YUI 3.4.0 it’s a css-only flag (https://github.com/yui/yui3/blob/master/src/autocomplete/HISTORY.md).

The relevant CSS is (adjust your z-index as necessary):

.yui3-aclist { z-index: 100; }

PS., your YAHOO. line is from YUI2, so that is quite peculiar and definitely not a standard template.

By the time your callback in the YUI().use(…) section is called, the dom should be ready. No ondomready required.