javascript - 具有正常概念javascript的自动完成文本框

Question

我正在尝试实现文本框自动完成，这是代码

HTML

<div class="sug">
    <input type="text" id="auto" onkeyup="display(event)" onblur="hide()" autocomplete="off"/>

    <div class="suggestion" id="suggestion">
    </div>
</div>

CSS

.suggestion {
    border: solid 2px black;
}

.sug > .suggestion {
    display: none;
}

.sug > .suggestion, #auto {
    width: 100px;
}

JavaScript

var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("anshul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id;//for providing id to each div
function display(e) {
    if (e.keyCode == 38 || e.keyCode == 40) {
        selectit(e);
    }
    data = "";
    id = 0;
    var state = $('#auto').val();
    if (state == "")//value empty
    {
        $('.suggestion').css({display: "none"});
    }
    else {
        for (var i = 0; i < array.length; i++) {
            var key = 0;
            for (j = 0; j < state.length; j++) {
                //for the matching of the array element with the text in the textbox
                if (array[i][j] == state[j]) {
                    key++;
                }
            }
            //putting the matched array element in a div
            if (key == state.length) {
                //the whole array will be copied with the bold values inserted
                var bolde = "";
                for (var k = 0; k < key; k++) {
                    bolde += "<b>" + array[i][k] + "</b>";
                }
                for (var l = key; l < array[i].length; l++) {
                    bolde += array[i][l];
                }
                id++;
                data += "<div id='" + id + "'>" + bolde + "</div>";
            }
        }
        $('.suggestion').html(data);
        $('.suggestion').css({display: "block"});
        if (data == "") {
            $('.suggestion').css({display: "none"});
        }
    }
}
function hide() {
    $('#suggestion').css({display: "none"});
    ;
}
function selectit(e) {
    var child = document.getElementById("suggestion").childNodes;
    for (var i = 0; i < child.length; i++) {
        if (child[i].id == "1") {
            child[i].style.color = "red";   //here is the problem in the code
        }
    }
}

在代码中，我想在按下按键时将第一个建议颜色设为红色，但颜色未显示

最后一条评论是问题所在的区域。

Answer 1

您的

function selectit(e)

功能无法正常工作（我认为是因为 e.keyCode）。

这是工作小提琴

Answer 2

为什么不使用 Jquery UI？它经过良好测试和信任：参考

Answer 3

您遇到的问题是您将颜色设置为红色，然后从 selectit 函数返回后，您将继续向下显示函数并替换此行中 .suggestion 中的值：

$('.suggestion').html(data);

因此，此时您删除了刚刚在 selectit 中设置的格式。

如果您要做的只是根据键选择设置颜色，那么您应该更改它：

if (e.keyCode == 38 || e.keyCode == 40) {
    selectit(e);
}

到：

if (e.keyCode == 38 || e.keyCode == 40) {
    selectit(e);
    return;
}