javascript - .get() 和 .find() 用于搜索结果

Question

所以我在页面上有一个搜索栏(/Search)，当用户搜索某些内容时，它将对输入文本运行过滤器并使用过滤后的结果刷新页面。

如果有人搜索“monkey”这个词，搜索结果的URL将为

/Search?searchBoxText=monkey

我试图在不刷新页面的情况下实现这一点。

所以在我的 main.js 中我有:

$(function () { 
    $("#searchBox").keyup(function (e) {
        var searchBoxText= $("#searchBox").val();
        $.get("/Search?searchBoxText=" + searchBoxText, function (getHtml) {
            $("#resultsDiv").html(getHtml);
        });
    });
});

问题是它在 #resultsDiv 中显示页面的整个主体，而我希望它只显示 #resultsDiv。因此它会再次显示标题、搜索栏和按钮。

本质上，我想在旧的 #resultsDiv 中显示新结果(位于 #resultsDiv 中)，但我似乎无法限制 .get( ) 仅从结果页面获取特定元素。

我尝试过

• $.get("/Search?searchBoxText="+ searchBoxText + "#resultsDiv", 函数 (getHtml)

• $("#resultsDiv").html(getHtml).find("#resultsDiv");

还有类似的其他改变，但似乎没有任何效果。

谢谢!

Answer 1

请尝试以下操作

$("#resultsDiv").html($(getHtml).filter("#resultsDiv"));

<强> Demo