Класс добавлен для элемента A, но не отображается?

Question

У меня есть поле поиска, которое предлагает разные имена в зависимости от того, что вы вводите в поле. Когда вы используете клавиши со стрелками (вверх или вниз), он добавляет класс к каждому соответствующему имени. Я вижу в console.log, что стиль добавлен, но цвет не меняется. Я не понимаю, что происходит.

Вот мой HTML:

    <div class="container">
    <h4>AJAX - Search Form</h4>
    <br>

    <form autocomplete="off">
        <div style="width:300px;">
            <input type="text" onkeyup='ajaxSearch(this,event)' id="searchbox" name="searchbox"
                placeholder="Search for a name...">
            <input type="submit" name="q" id="send" placeholder="Etsi">
        </div>
    </form>
    <div id="resultsDiv"></div>
</div>

А вот мой JS:

var index = -1;
    var resultUrl = "";
    var searchURLResults;
    var resultsDiv = document.getElementById('resultsDiv');
    var input = document.getElementById('searchbox');

    function ajaxSearch(field, event) {
        /*************** ONKEYUP ************/
        var keyCode = event.keyCode;
        if (keyCode == 40) {
            index++;
            if (index >= resultsDiv.childElementCount) {
                index = resultsDiv.childElementCount - 1;
            }
            highlight();
        } else if (keyCode == 38) {
            index--;
            if (index >= resultsDiv.childElementCount) {
                index = resultsDiv.childElementCount + 1;
            }
            highlight();
        } else if (keyCode == 27) {
            field.value = "";
            closeAllLists(resultsDiv);
        }

        /*************** AJAX ************/
        try {
            var xhr = new XMLHttpRequest();
        } catch (e) {
            alert(e);
        }
        if (input.value !== "") {
            resultsDiv.innerHTML = "";
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var persons = xhr.responseText.split('\t');
                    personsToDiv(persons);
                }
            }
            xhr.open('GET', 'ajax-suggest.php?q=' + input.value, true);
            xhr.send();
        }
    }

    function personsToDiv(persons) {
        if (persons.length !== 0 && resultsDiv.children.length == 0) {
            for (var i = 0; i < persons.length; i++) {
                var a = document.createElement('A');
                a.setAttribute("class", "search-item");
                a.href = "#";
                var name = document.createTextNode(persons[i]);
                a.appendChild(name);
                resultsDiv.appendChild(a);
                a.setAttribute("href", "ajax-suggest.php?q=" + persons[i]);

            }
        }

    }
    /*************** HIGHLIGHTER ************/
    function highlight() {
        for (var i = 0; i < resultsDiv.childElementCount; i++) {
            var suggestion = resultsDiv.childNodes[i];
            console.log(suggestion);
            if (i === index) {
                suggestion.style = "background-color:violet";
            }
        }
    }

    function closeAllLists(resultsDiv) {
        var items = document.getElementsByClassName('search-item');
        while (resultsDiv.firstChild) {
            resultsDiv.removeChild(resultsDiv.lastChild);
        }
    }