Javascript 从头开始自动完成文本框

我正在使用javascript和jquery从头开始编写自动完成输入控件。我知道我可以使用jquery自动完成。但是那样就没有乐趣了

到目前为止，我的自动完成功能显示建议，但我无法使用鼠标选择建议。我该怎么做

到目前为止，我使用的代码是html

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

下面是样式表

<style>
.suggestion
{
    border:solid 2px black;
}
.sug > .suggestion
{
    display:none;
}
.sug > .suggestion,#auto
{
    width:100px;
}
}
</style>

我的javascript代码如下

<script type="text/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 += "" + array[i][k] + "";
                    }
                    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" });
            selectit(e);
            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
            }
        }
    }
</script>

---

谢谢

有两个问题

一: 你需要脱掉皮；来自onblur

---

它没有显示任何提示我不知道如何使用fiddle@user3168736您需要添加jquery@xyz转到，将HTML代码放入HTML框，依此类推，当所有代码都在该页面中时，点击顶部的Run按钮查看结果。如果准备好了，请单击“保存/更新”并在此处复制/粘贴链接。如下所示：没有建议yetTWO：设置div的onclik并使用hdie；在里面。onclik，我来纠正这个first@Youness如果我想使用鼠标的上下箭头键选择建议怎么办？然后我必须添加一些代码；哈哈，你需要那个功能吗？@Youness实际上是的，我需要那个功能。谢谢:

<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" autocomplete="off" /><!--i changed here to Note the on blur-->
<div class="suggestion" id="suggestion">
</div>
</div>

<script>
 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;
    function display(e)
    {


        if (e.keyCode == 38 || e.keyCode == 40)
        {
            selectit(e);
        }
        data = "";
        id = 0;
        var state = $('#auto').val();
        if (state == "")
        {
            $('.suggestion').css({ "display": "none" });
        }
        else
        {
            for (var i = 0; i < array.length; i++)
            {
                var key = 0;
                for (j = 0; j < state.length; j++)
                {
                    if (array[i][j] == state[j])
                    {
                        key++;
                    }
                }
                if (key == state.length)
                {
                    var bolde = "";
                    for (var k = 0; k < key; k++)
                    {
                        bolde += "" + array[i][k] + "";
                    }
                    for (var l = key; l < array[i].length; l++)
                    {
                        bolde += array[i][l];
                    }
                    id++;
                    data += '<div id="' + id + '" onclick="$(\'#auto\').val(this.innerHTML);hide();" >' + bolde + "</div>";// i changed here note the on click
                }
            }
            $('.suggestion').html(data);
            $('.suggestion').css({ "display": "block" });
            selectit(e);
            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"; 
            }
        }
    }

</script>