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

idmy_acを使用して入力を作成するだけで完了です。

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

ここを参照してください。

于 2013-10-11T13:23:56.123 に答える