CODEWITHSUNDEEP
yui
Michael Joyner
Michael Joyner

Reputation: 145

YUI3 autocomplete has images on top - How to get autocomplete to the top

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

enter image description here

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;
        });
});

});

Upvotes: 0

Views: 339

Answers (1)

jshirley
jshirley

Reputation: 264

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.

Upvotes: 1

Related Questions