Question

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

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

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

因为如果我不这样做，那么当我输入“专业”然后输入“ d ”时，我会在搜索产品时遇到重复。（我将列表项追加到列表中）是否有可能实现我以某种方式删除与“ prod ”（之前与“ pro ”匹配的元素并且在输入“ d ”后，与prod匹配的元素保持不变。

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

Psst ...我假设你也想限制对服务器的调用，而你的搜索结果列表并不是很大！

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

点子：

将最新的AJAX调用条件存储在全局中。
如果新搜索值包含最新的AJAX搜索值，则过滤/隐藏现有数据集中与新条件不匹配的项目。不要进行新的搜索。
如果新值不包含最新的AJAX搜索值：清除当前数据集，更新AJAX搜索值，执行新的AJAX调用

Answer 3

将$ .each（http://api.jquery.com/jQuery.each/）中的索引传递到您的函数中，然后使用它来选择 replaceWith 的搜索结果（{{3你刚刚构建的元素。在使用此方法时，搜索结果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);
});

MVC中更加用户友好的搜索框

3 个答案: