1

ここにあるこの JavaScript は、音楽検索エンジンの検索候補のように機能します。入力した最初の文字でこの問題が発生しますが、それ以上の文字を入力すると、結果が 1 行に表示され、写真が途切れることはありません。誰かが見て、私が間違っていることを教えてください。ここにサンプルがありますhttp://jsfiddle.net/coladeu/Qhj5N/24/

<script>var keyword;
    $("input#selectedInput").bind("autocompleteselect", function (event, ui) {        
alert("Sel item " + JSON.stringify(ui.item.json));
}).autocomplete({
appendTo: "#list",
source: function (request, response) {
    keyword= $('#selectedInput').val();
    //alert("success");
    $.ajax({
        url: "http://itunes.apple.com/search?term=" + keyword + "&entity=musicTrack",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
        },
        success: function (data) {
            response($.map(data.results, function (item) {
                itunesJson = item;
                return {
                    label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>",
                }
            }));
            var elm = $("#list");
            elm.html(elm.text());
        },
    });
}
                     });​&lt;/script>
4

1 に答える 1

1

ここでうまくいかないことがいくつかあります。主な問題は、このデモ_renderItemで示されているように、リストの表示をカスタマイズする関数をオーバーライドする必要があることです。

これはlabel、各アイテムのプロパティに HTML を入力する代わりに、次のようにする必要があることを意味します。

$("input#selectedInput").bind("autocompleteselect", function(event, ui) {
    alert("Sel item " + JSON.stringify(ui.item));
}).autocomplete({
    appendTo: "#list",
    source: function(request, response) {
        $.ajax({
            url: "http://itunes.apple.com/search?term=" + request.term + "&entity=musicTrack",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },

            success: function(data) {
                response($.map(data.results, function(item) {
                    itunesJson = item;
                    return {
                        imgUrl: item.artworkUrl30 ,
                        label: item.trackName
                    }
                }));
            },
        });
    }
}).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li />")
        .data("item.autocomplete", item)
        .append("<a><img src='" + item.imgUrl + "' alt='no photo' />" + item.label + "</a>")
        .appendTo(ul);
};​

例: http://jsfiddle.net/Qhj5N/26/

于 2012-09-24T01:10:23.123 に答える