0

我正在使用纯 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);

            });

    }

这是我的 json 文件内容：

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

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

示例图像

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

4

1 回答 1

0

您可以为此使用 jQuery UI 自动完成功能。http://jqueryui.com/autocomplete/

CSS

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

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

Javascript

现在，创建自动完成并覆盖 _renderItem() 方法：

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

请注意，内部在标签内。这可能不是正确的 HTML，但它是使整个项目可点击的唯一方法。

HTML

现在只需使用 id 创建一个输入my_ac即可：

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

参考这里。

于 2013-10-11T13:23:56.123 回答