JavaScript自动建议/自动完成一些彩色文本

我使用纯JavaScript标准DOM在HTML上输入内容，创建自己的自动建议。我正在尝试编写自己的代码，而不使用带有外部json文件的JavaScript框架。这是我目前的代码：

<input type="text" class="input_data" id="Music_Genre" onKeyUp="suggestMusicGenre(this.value, event)" />
            <div id="musicgenre_suggest"></div>

function suggestMusicGenre(key, e) {

            var targetelem = document.getElementById('musicgenre_suggest');
            var temp_array = [];

            // basic style for div element
            $("#musicgenre_suggest").css({
                'position':'absolute',
                'background-color':'#fff',
                'width': $("#Music_Genre").css('width'),
                'cursor':'pointer',
                'border':'1px solid #a4a4a4'
            });

            $.getJSON('json/musicgenre.json', function(data) {
                $.each(data, function(index, value) {
                    var str = value.toString().toLowerCase();
                    var findstr = str.match(key.toString().toLowerCase());
                    var boolIfInsert = (findstr != null) ? temp_array.push(value) : false;
                });

                var prent = document.createElement('ul');
                    prent.style.listStyleType = "none";

                for(var o in temp_array) {
                    var chld = document.createElement('li');
                    var txtchld = document.createTextNode(temp_array[o]);
                        chld.appendChild(txtchld);
                        prent.appendChild(chld);
                }


                targetelem.innerHTML = '';
                targetelem.appendChild(prent);

            });

    }

它工作得很好，但我需要在其中添加更多功能，就像Facebook那样，它会自动生成一些建议的候选字符串，使其颜色与已键入的用户不同，如下面的示例：

---

使用纯标准JavaScript是否可行？或者我应该使用JavaScript框架吗？

您可以使用jQuery UI自动完成

CSS 首先，让我们决定列表项的外观（这并不是最终代码的一部分，只是为了了解它）：

Javascript 现在，创建自动完成并覆盖_renderItem（）方法：

参考资料

{
"AL"    :   "Alternative Music",
"BL"    :   "Blues",
"CM"    :   "Classical Music",
"CoM"   :   "Country Music",
"DM"    :   "Dance Music",
"EL"    :   "Easy Listening",
"EM"    :   "Electronic Music"
}

<div class="list_item_container">
    <div class="image"><img src="hanks.png"></div>
    <div class="label">Tom hanks</div>
    <div class="description">Actor</div>
</div>

DIV.list_item_container {
    height: 90px;
    padding: 5px;
}
DIV.image {
    width: 90px;
    height: 80px;
    float: left;
}
DIV.description {
    font-style: italic;
    font-size: 0.8em;
    color: gray;
}

$(function() {

    $("#my_ac").autocomplete({
        source: [
            {
                value: "Tom Hanks",
                label: "Tom Hanks",
                description: "Actor",
                image: "hanks.png"
            },
            {
                value: "Termionator 2",
                label: "Termionator 2",
                description: "Movie",
                image: "terminator.png"
            }
        ],
        minLength: 1
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.image + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.description + '</div></div></a>';
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append(inner_html)
            .appendTo( ul );
    };
});

<input type="text" id="my_ac" size="40" />