2

を使用して検索ボックスを実装しましjQueryた。これは、検索語を送信し、その後受信したコードをJson使用して、一致した検索項目のリストを作成するコードです。

問題は、keyup一致したすべてのアイテムを削除するたびに次のようになることです。

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

そうしないと、「 pro」と入力してから「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 ()
            {
            }
        });
    }
});
4

3 に答える 3

0

Psst...サーバーへの呼び出しも制限したいと考えており、検索結果リストはそれほど大きくないと思います。

そう！現在のアプローチの利点は、既存のデータセットを管理/比較する必要がないことです。これにより、「pro」の検索が「cro」の検索に変更された場合や、以前の AJAX 呼び出しが無関係になるその他の変更が行われた場合に、作業が容易になります。しかし、あなたが言ったように、「pro」の後に「prod」を検索すると、この明確なアイテムの非効率性が残ります。

考え：

  1. 最新の AJAX 呼び出し条件をグローバルに保存します。
  2. 新しい検索値に最新の AJAX 検索値が含まれている場合、新しい条件に一致しない既存のデータ セット内のアイテムをフィルター処理または非表示にします。新しい検索を実行しないでください。
  3. 新しい値に最新の AJAX 検索値が含まれていない場合: 現在のデータ セットを消去し、AJAX 検索値を更新し、新しい AJAX 呼び出しを実行します。
于 2013-05-20T16:57:19.510 に答える
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 に答える