Ключевые слова на уровне сворачивания поиска / фильтрации - PullRequest
Новая
       69

Ключевые слова на уровне сворачивания поиска / фильтрации

0 голосов
/ 10 июля 2020

Я хотел добавить панель поиска, чтобы пользователь мог искать и фильтровать ключевое слово в коллапсе (с уровнем 1 до уровня 4), которое им нужно. Мне удалось получить поиск / фильтрацию по ключевым словам уровня 1, но не смог отфильтровать уровень 2 до уровня 4. Кто-нибудь, пожалуйста, помогите мне, как я могу отобразить мой поиск / фильтр уровня 2 и уровня 4. Пожалуйста помоги. Заранее спасибо.

Это код html: 

@*Collapsible*@
    <button type="button" class="collapsible">1. Criteria: Industry Search</button>
    <div class="content">
        <br />
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
        @*<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">*@                       
        <h3>Industry Selection</h3>
        <br />
        <div class="industry-compnent">
            <ul id="myUL">
                @for (int i = 0; i < Model.Industries.Count(); i++)
                {
                    //EC: add start tags for lvl 1 items
                    if (Model.Industries[i].Industry_Level == 1)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none" >(@Model.Industries[i].GIC_Code)</span></a></span>
                                <ul class="nested"
                        </text>
                    }
                    //EC: add start tags for lvl 2 items
                    if (Model.Industries[i].Industry_Level == 2)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none">(@Model.Industries[i].GIC_Code)</span></a></span>
                                <ul class="nested">
                        </text>
                    }
                    //EC: add start tags for lvl 3 items
                    if (Model.Industries[i].Industry_Level == 3)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none">(@Model.Industries[i].GIC_Code)</span></a></span>
                                <ul class="nested">
                        </text>
                    }
                    //EC: add start and end tags for lvl 4 items (can do it together because lvl 4 is the lowest lvl)
                    if (Model.Industries[i].Industry_Level == 4)
                    {
                        <text>
                            <li class="tags_select">
                                <span class="comps-industry-list"><a>@Model.Industries[i].Industry_Name <span style="display:none">(@Model.Industries[i].GIC_Code)</span></a></span>
                            </li>
                        </text>
                        //EC: add end tags of lvl 3 if this item is lvl 4 and next item is not lvl 4
                        if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 4 && Model.Industries[i + 1].Industry_Level != 4)
                        {
                            @Html.Raw("</ul></li>")
                            //EC: add end tags of lvl 2 if this item is lvl 4 and next item is not lvl 3
                            if (Model.Industries[i + 1].Industry_Level != 3)
                            {
                                @Html.Raw("</ul></li>")
                                //EC: add end tags of lvl 1 if this item is lvl 4 and next item is not lvl 2
                                if (Model.Industries[i + 1].Industry_Level != 2)
                                {
                                    @Html.Raw("</ul></li>")
                                }
                            }

                        }
                    }
                    //EC: add end tags of lvl 3 if this item is lvl 3 and next item is not lvl 4
                    if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 3 && Model.Industries[i + 1].Industry_Level != 4)
                    {
                        @Html.Raw("</ul></li>")
                        //EC: add end tags of lvl 2 if this item is lvl 3 and next item is not lvl 3
                        if (Model.Industries[i + 1].Industry_Level != 3)
                        {
                            @Html.Raw("</ul></li>")
                            //EC: add end tags of lvl 1 if this item is lvl 3 and next item is not lvl 2
                            if (Model.Industries[i + 1].Industry_Level != 2)
                            {
                                @Html.Raw("</ul></li>")
                            }
                        }
                    }
                    //EC: add end tags of lvl 2 if this item is lvl 2 and next item is not lvl 3
                    if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 2 && Model.Industries[i + 1].Industry_Level != 3)
                    {
                        @Html.Raw("</ul></li>")
                        //EC: add end tags of lvl 1 if this item is lvl 2 and next item is not lvl 2
                        if (Model.Industries[i + 1].Industry_Level != 2)
                        {
                            @Html.Raw("</ul></li>")
                        }
                    }
                    //EC: add end tags of lvl 1 if this item is lvl 1 and next item is not lvl 2
                    if (i + 1 < Model.Industries.Count() && Model.Industries[i].Industry_Level == 1 && Model.Industries[i + 1].Industry_Level != 2)
                    {
                        @Html.Raw("</ul></li>")
                    }
                    //EC: add end tags of lvl 3,2,1 if this is the last item
                    //(e.g. If last item is lvl 4, then add close tags of lvl 3,2,1. If last item is lvl 3, then add close tags of lvl 2,1, etc.)
                    if (i + 1 == Model.Industries.Count())
                    {
                        for (int j = 1; j < Model.Industries[i].Industry_Level; j++)
                        {
                            @Html.Raw("</ul></li>")
                        }
                    }
                }
            </ul>
        </div>
    </div>
</div>

Это JavaScript Код для поиска / фильтрации списка: 

<script>
    function myFunction() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li", "ul");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>

Так выглядит функция поиска с уровнями с 1 по 4 сворачивания

Не удалось выполнить поиск / фильтровать уровень 2 или уровень 3, уровень 4

Можно искать / фильтровать только уровень 1

1 Ответ

0 голосов
/ 10 июля 2020

Вам нужно будет как-то рассмотреть и вложенные элементы, прежде чем вы решите показать / скрыть элемент верхнего уровня.

Вы уже перебираете все <li> s, независимо от уровня, поэтому все вы действительно нужно добавить, чтобы не скрыл элемент, если какой-либо из его вложенных элементов содержит условие поиска.

Следующее должно работать (непроверено). HTMLElement.innerText возвращает полный текст текущего элемента, включая любой из его вложенных элементов. 

if (li[i].innerText.toUpperCase().indexOf(filter) > -1) {
    …
...