2

我已经使用jQuery. 这是发送搜索词的代码，之后我收到Json用于制作匹配搜索项目列表的代码。

问题是每次keyup我删除所有匹配的项目：

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

因为如果我不输入“ pro ”然后输入“ d ”，我会在搜索产品时得到重复。（我正在将列表项附加到列表中）是否有可能以某种方式删除与“ prod ”不匹配的元素（当然之前与“ prod ”匹配）并且匹配 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 ()
            {
            }
        });
    }
});
4

3 回答 3

0 
  $.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);
     }
        });
于 2013-05-20T16:51:57.807 回答
0

Psst...我假设您还想限制对服务器的调用，并且您的搜索结果列表不是非常庞大！

所以！您当前方法的好处是您不必管理/比较任何现有数据集。当搜索“pro”更改为搜索“cro”或任何其他使先前 AJAX 调用无关的更改时，这会使事情变得更容易。但是，就像您说的那样，当您在“pro”之后搜索“prod”时，它会让您清楚然后重新添加项目效率低下。

主意：

  1. 将最新的 AJAX 调用标准存储在全局中。
  2. 如果新搜索值包括最新的 AJAX 搜索值，则过滤/隐藏现有数据集中与新条件不匹配的项目。不要执行新的搜索。
  3. 如果新值不包括最新的 AJAX 搜索值：清除当前数据集，更新 AJAX 搜索值，执行新的 AJAX 调用
于 2013-05-20T16:57:19.510 回答
0

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

通过更改两行来做到这一点......

$.each(data.productsWereSeached, function (index) {

    ... all of the existing code in the loop stays the same except ... 

    $("#realPlaceForSearchItems LI:eq(" + index + ")").replaceWith($listItem);
});
于 2013-05-20T17:23:59.747 回答