Выполните фильтрацию на стороне клиента и выполните поиск на стороне сервера.

Question

Я пытаюсь создать страницу, которая позволяет пользователю искать товары, а затем на основе результатов, которые появляются из функции поиска (на основе ключевого слова), пользователь получает дополнительные параметры для фильтрации поиска, чтобы указать c результаты (детализация вниз на результаты). Как видно на этом изображении.

Когда пользователь вводит условие поиска и нажимает кнопку поиска, форма отправляется обратно на сервер с ключевым словом поиска и раскрывающимся списком Выбор продукта / компании. Результаты поиска отображаются в пользовательском интерфейсе. Функция поиска также возвращает категории, компании, страны, которые есть в результатах поиска. Пользователь может использовать эти раскрывающиеся списки для детализации поиска.

На данный момент я отправляю эти параметры на сервер, и поиск выполняется на сервере, чего я хочу избежать. Я хочу, чтобы сервер заботился только о поиске по ключевым словам, а фильтрация (используя выпадающие списки) происходит на стороне клиента. Как я могу достичь этого?

@using PagedList.Mvc
@model My_Portal.Controllers.ListingViewModel

<script>
    $(function () {

        $("#Country").change(function () {
            search();
        });

        $("#Company").change(function () {
            search();
        });

        $("#Category").change(function () {
            search();
        });

    });
</script>
<div class="container">
    <div class="row custom-box mx-1">
        <div class="col-md-3 col-12 mb-1">
            <div class="form-group">
                @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "product-label" })
                @Html.DropDownListFor(model => model.Category, Model.CategoryItems, "--Select--", new { @class = "form-control form-control-md custom-select-1" })
                @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger invalid-feedback" })
            </div>
        </div>
        <div class="col-md-3 col-12 mb-1">
            <div class="form-group">
                @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "product-label" })
                @Html.DropDownListFor(model => model.Company, Model.CompanyItems, "--Select--", new { @class = "form-control form-control-md custom-select-1" })
                @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger invalid-feedback" })
            </div>
        </div>
        <div class="col-md-3 col-12 mb-1">
            <div class="form-group">
                @Html.LabelFor(model => model.CountryID, htmlAttributes: new { @class = "product-label" })
                @Html.DropDownListFor(model => model.CountryID, Model.CountryItems, "--Select--", new { @name = "Country", @class = "form-control form-control-md custom-select-1" })
                @Html.ValidationMessageFor(model => model.CountryID, "", new { @class = "text-danger invalid-feedback" })
            </div>
        </div>
        <div class="col-md-3 col-12 mb-1">
            <div class="form-group">
                <label for="name" class="control-label" style="color:#9496B5">PRODUCT</label>
                <input type="text" name="name" class="form-control custom-select-2" id="name" placeholder="Type here">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class=" col-md-12 col-12">
            <h4 class="h4-title">SEARCH RESULTS</h4>
        </div>
    </div>

    <div class="row">

        @if (Model.ResultItems != null)
        {
            foreach (var item in Model.ResultItems)
            {
                if (Model.IsProduct)
                {
                <div class="container" id="product-view">
                    <div class="row">
                        <div class="col-md-4 col-lg-4 col-sm-6 col-12 mt-4">
                            <div class="card custom-card-product ">
                                <img class="card-img-top" src="@item.LogoUrl">
                                <blockquote class="card-blockquote p-3 text-center">
                                    <h5>Product Name</h5>
                                    <p>@item.CompanyName</p>
                                    <p>Product Description - Lorem ipsum dolor sit amet, solum dictas vim cu, ne his hendrerit deterruisset, id sed doctus fuisset intellegam. Per case melius assentior ea. Vis ad movet dicunt, ea modus tincidunt sea. Populo…</p>
                                    <footer>
                                        <a href="#" class="btn btn-outline-blue-custom"> Contact Us</a>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
                }
                else
                {
                <div class="col-md-4 col-lg-4 col-sm-6 col-12 mt-4">
                    <div class="card custom-card-product ">
                        <img class="card-custom-img" src="@item.LogoUrl">
                        <blockquote class="card-blockquote p-3 text-center">
                            <h5>@item.CompanyName</h5>
                            <p>@item.Country</p>
                            <p>@item.Sectors</p>
                            <p>@item.NumberofEmployees</p>
                            <p>First Keyword | <span style="color:#6AB7D8">the match</span> | <span style="color:#6AB7D8">the match</span> | Fourth | Fifth | Sixth | Seventh | Eighth | Ninth | Tenth | Eleventh | Twelfth | Thirteenth | Fourteenth | Fifteenth | Sixteenth | Seventeenth</p>
                            <footer>
                                <a href="@Url.Action("PublicView","Company", new { name = item.CompanyName, companyDetails = item.ItemGUID })" class="btn btn-outline-blue-custom"> Contact Us</a>
                            </footer>
                        </blockquote>
                    </div>
                </div>
                }
            }
        }
    </div>
    <div class="offset-6">
        @{
            if (Model.ResultItems != null)
            {
                @Html.PagedListPager(Model.ResultItems, page => Url.Action("Index", new { page }))
                <p>
                    Page @(Model.ResultItems.PageCount < Model.ResultItems.PageNumber ? 0 : Model.ResultItems.PageNumber) of 
                    @Model.ResultItems.PageCount
                </p>
            }
        }
    </div>
</div>

Как видите, как только значение раскрывающегося списка изменяется, вызывается функция поиска 'Javascript', которая, в свою очередь, вызывает метод действия контроллера через Ajax call ,