jquery - AJAX 搜索不是动态的 - 保留结果并且不计算结果

Question

我进行了实时 ajax 搜索，并尝试将结果分为 2 个类别，这是可行的。我遇到的问题是，当我输入或删除一个字符时，列表结果会增加相同的项目而不是定义。结果的数量也以一种非常奇怪的方式显示。

$("#searchterm").keyup(function (e) {
var q = $("#searchterm").val();
$.getJSON('https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6',

function (data) {
    $("#results").empty();
    $("#results").append("Results for <b>" + q + "</b>");
    $.each(data.items, function (i, item) {
        var title = item.volumeInfo.title;
        $.each(item.volumeInfo.industryIdentifiers, function (i2, type) {
            $("<div/>")
            .append(title)
            .appendTo("div[id='" + type.type + "']");
            $(".number").append(" total " + type.type.length);
        });
    });

});
});

请查看小提琴http://jsfiddle.net/sFn8t/并随时对其进行修改，以便其他人可以将其用作示例。提前致谢。

Answer 1

我已设法修改代码并使其正常工作。请关注我更新的小提琴 - 我希望它对像我这样的初学者有所帮助。

$("#searchterm").keyup(function (e) {
var q = $("#searchterm").val();
$.getJSON('https://www.googleapis.com/books/v1/volumes?q=:' + q,

function (data) {
    var tmp = {};

    $.each(data.items, function (i, item) {
        var type = item.volumeInfo.industryIdentifiers[0].type;
        if (!tmp[type]) {
            tmp[type] = [];
        }
        tmp[type].push(item);


    });
    var html = [];
    $.each(tmp, function (key, item) {
        html.push('<h3>' + key + ' - ');
        html.push(item.length + '</h3><ul>');
        $.each(item, function (i, val) {

            html.push('<li><a href="page/?id=' + val.id + '"><strong>' + val.volumeInfo.title + '</strong></li></a>');

        });

        html.push('</ul>');
    });

    $('#results').html(html.join(''));

});
});

http://jsfiddle.net/sFn8t/1/