MVC中更友好的搜索框

Question

我已经使用jQuery实现了搜索框。这是发送搜索词和的代码之后，我收到Json，我用它来制作匹配搜索项的列表。

问题是，在每个keyup上，我删除所有匹配的项目:

    $("#realPlaceForSearchItems").html(""); 

，因为如果我不这样做，我在搜索产品时如果输入"pro"，然后输入"d"，就会得到重复。(我正在将列表项附加到列表中)是否有可能实现我以某种方式删除不匹配"prod"的元素(先前匹配"pro")，并且匹配prod的元素在键入"d"后保持不变?

 $("#searchInput").keyup(function () {
    $this = $(this);
    $('#realPlaceForSearchItems').show();
    $("#realPlaceForSearchItems").html("");
    var seachedTerm=$this.val();
    if ($this.val().length> 2)
    {
        $("#realPlaceForSearchItems").html("");
        $('#realPlaceForSearchItems').show();
        $.ajax({
            type: "POST",
            url: ROOT + "Filter/Search/",
            data: {term: $this.val()},
            success: function (data)
            {
                var Link = $("#searchTemplate>li>a");
                var placeForProductId=$("#searchTemplate>li>a>input");
                var placeForPicture = $("#searchTemplate>li>a>div>img");
                var placeForProductName = $("#searchTemplate>li>a>div>div");
                var placeForPrice= $("#searchTemplate>li>a>div>span");
                $.each(data.productsWereSeached, function () {
                    console.log("sddsd", data.totalrows);
                    var imagesFolder="/Content/images/";
                    var pathToProduct="/ProductDetails/Index/"
                    var slash = "/";
                    Link.attr("href", pathToProduct + this.Id);
                    placeForProductId.val(this.Id);
                    if (this && this.Picture) //for the case there is no any picture there would be error cant read propery or undefined
                        placeForPicture.attr("src", imagesFolder + this.Id + slash + this.Picture.FileName);
                    else
                        placeForPicture.attr("src", "");
                    placeForProductName.html(this.Name);
                    placeForPrice.html((parseFloat(this.Price) / 100.0).toString() + " kn");
                    $listItem = $("#searchTemplate").html();
                    $("#realPlaceForSearchItems").append($listItem);
                });
                $("#nOfMatchedProducts").val(data.totalrows);
                if (data.totalrows > 2)
                {
                    var searchurl="/Search/ShowMoreSearched?term="
                    $showMoreItem = $("#showMoreItem").html();
                    $("#showMoreItem>li>a").attr("href",searchurl+seachedTerm);
                    $("#realPlaceForSearchItems").append($showMoreItem);
                }

            },
            failure: function ()
            {
            }
        });
    }
});

Answer 1

  $.each(data.productsWereSeached, function () {
    if($('a[href="'+pathToProduct + this.Id+'"]').length == 0) {
            console.log("sddsd", data.totalrows);
            var imagesFolder="/Content/images/";
            var pathToProduct="/ProductDetails/Index/"
            var slash = "/";
            Link.attr("href", pathToProduct + this.Id);
            placeForProductId.val(this.Id);
            if (this && this.Picture) //for the case there is no any picture there would be error cant read propery or undefined
                placeForPicture.attr("src", imagesFolder + this.Id + slash + this.Picture.FileName);
            else
                placeForPicture.attr("src", "");
            placeForProductName.html(this.Name);
            placeForPrice.html((parseFloat(this.Price) / 100.0).toString() + " kn");
            $listItem = $("#searchTemplate").html();
            $("#realPlaceForSearchItems").append($listItem);
     }
        });

Answer 2

…我假设您还希望限制对服务器的调用，并且您的搜索结果列表不是非常大!

如此!当前方法的好处是您不必管理/比较任何现有数据集。当搜索"pro"更改为搜索"cross"或任何其他使之前的AJAX调用无关的更改时，这使事情变得更容易。但是，就像你说的，当你在"pro"之后搜索"prod"时，它会给你留下这个清除然后重新添加项的效率低下。

的想法:

1. 将最近的AJAX调用条件存储在全局变量中。
2. 如果新的搜索值包含最新的AJAX搜索值，则过滤/隐藏现有数据集中不符合新标准的项。不执行新的搜索
3. 如果新值不包括最新的AJAX搜索值:清除当前数据集，更新AJAX搜索值，执行新的AJAX调用

Answer 3

从$传递索引。每个(http://api.jquery.com/jQuery.each/)放入函数中，然后使用它来选择搜索结果replaceWith (http://api.jquery.com/replaceWith/)您刚刚构建的元素。在使用此方法时，搜索结果UL中的四个LI元素必须在搜索之前存在。Keyup被执行

修改两行…

$.each(data.productsWereSeached, function (index) {
    ... all of the existing code in the loop stays the same except ... 
    $("#realPlaceForSearchItems LI:eq(" + index + ")").replaceWith($listItem);
});