Clone SXA Search result

Question

I am using SXA 1.6 Clone Feature to clone SXA Search result render to new one with custom .cshtml file so I can change the markup of the container instant of <ul> <li> to <div>tags , however I have noticed if I change

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>

to

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "FeaturedNews-search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>`

With the changes done in "RenderingCssClass" there is no search result and when I try to change the class with the below code its not reflecting on the rendered results

<ul class="search-result-list">

        <li>
            @foreach (BaseVariantField variantField in Model.VariantFields)
            {
                @Html.RenderingVariants().RenderVariant(variantField, Model.PageItem, false)
            }
        </li>
    </ul>

Answer 1

As I promised I've checked this for you. So the first place to looks in case of search renderings is the JavaScript file (most of the search renderings works on the fron-end). Take a look at component-search-results.js:

This is just a part of code but you can already see that it requires the search-results css class. So what you should do is:

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results FeaturedNews-search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties'>`

What is more, take a look at the beginning of component-search-results.js. The template to build search results unsorted list (<ul><li>) is defined at the beginning of that file.