AJAX搜索非动态 - 保留结果并且不计算结果

时间:2013-04-03 08:57:35

标签: jquery ajax json

我有一个实时的ajax搜索,并试图将结果分为两类,这是工作。我遇到的问题是当我输入或删除字符时,列表结果会增加相同的项而不是定义。结果的数量也以一种非常奇怪的方式显示出来。

$("#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/ ,随时修改,以便其他人可以使用它作为示例。提前谢谢。

1 个答案:

答案 0 :(得分:0)

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

$("#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/