搜索列表项（菜单） [英] Search list items (menus)

问题描述

在我的页面菜单中有。菜单包含子菜单，子菜单和多个子菜单。



我保留搜索菜单项，子菜单项的搜索框。我编写了有助于按菜单名称搜索的代码...如果输入与主菜单相关的文本，则还需要显示所有子菜单。但是如果子菜单与不同的文本有关，我的代码就无法工作。



当我输入时，如果文本与主菜单文本匹配而不是子菜单文本，我需要显示主菜单和子菜单。但是在代码隐藏子菜单下面。

Hi,

In my page menus are there . Menus contains sub-menus , sub-menus and Multiple sub-menus.

I kept search box for search menu items , sub menus items. I written code which helps to search as per menu name ... If entering text related to Main menu , it need to show all sub menus also. But my code not working if sub-menus related to different text.

When i am entering , if text matches to main menu text and not to sub menu text , I need to show both main menu and sub menu. But below code hiding submenu.

<ul class="nav" id="side-menu">
                            <div class="sidebar-search">
                                <div class="input-group custom-search-form">
                                    <input type="text" class="form-control" placeholder="Search..." id="txtSearchboxIDCommon" />
                                    <span class="input-group-btn">

                                        <button class="btn btn-default" type="button">
                                            
                                        </button>
                                    </span>
                                </div>
                                <!-- /input-group -->
                            </div>
<li>
                <a href="../test/test1.aspx" target="_blank">Fruits</a>
            </li>
            <li>
                <a href="#">Apple<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="../test/test2.aspx" target="_blank">Orange</a>
                    </li>
                    <li>
                        <a href="../test/test3.aspx" target="_blank">Grapes</a>
                    </li>
                    <li>
                        <a href="../test/test4.aspx" target="_blank">Mango</a>
                    </li>
                </ul>
            </li>
</ul>

$(document).ready(function () {
            $("#txtSearchboxIDCommon").on("keyup click input", function () {

                if (this.value.length > 0) {
                    $("#side-menu li").show().filter(function () {
                        //alert("test");
                        return $(this).find('a').text().toLowerCase().indexOf($("#txtSearchboxIDCommon").val().toLowerCase()) == -1;
                    }).hide();
                }
                else {
                    $("#side-menu li").show();
                }
            });
        });

谢谢，

Suresh P



我尝试过：

Thanks,
Suresh P

What I have tried:

<ul class="nav" id="side-menu">
                            <div class="sidebar-search">
                                <div class="input-group custom-search-form">
                                    <input type="text" class="form-control" placeholder="Search..." id="txtSearchboxIDCommon" />
                                    <span class="input-group-btn">

                                        <button class="btn btn-default" type="button">
                                            
                                        </button>
                                    </span>
                                </div>
                                <!-- /input-group -->
                            </div>
<li>
                <a href="../test/test1.aspx" target="_blank">Fruits</a>
            </li>
            <li>
                <a href="#">Apple<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="../test/test2.aspx" target="_blank">Orange</a>
                    </li>
                    <li>
                        <a href="../test/test3.aspx" target="_blank">Grapes</a>
                    </li>
                    <li>
                        <a href="../test/test4.aspx" target="_blank">Mango</a>
                    </li>
                </ul>
            </li>
</ul>

$(document).ready(function () {
            $("#txtSearchboxIDCommon").on("keyup click input", function () {

                if (this.value.length > 0) {
                    $("#side-menu li").show().filter(function () {
                        //alert("test");
                        return $(this).find('a').text().toLowerCase().indexOf($("#txtSearchboxIDCommon").val().toLowerCase()) == -1;
                    }).hide();
                }
                else {
                    $("#side-menu li").show();
                }
            });
        });

推荐答案

（ document ）。ready （ function （）{

(document).ready(function () {

（ #txtSearchboxIDCommon）。on（ keyup click input ， function （）{

if （ this .value.length> 0 ）{

("#txtSearchboxIDCommon").on("keyup click input", function () { if (this.value.length > 0) {

（ ＃side-menu li）。show（）。filter（ function （）{
// alert（test）;
< span class =code-keyword> return

("#side-menu li").show().filter(function () { //alert("test"); return

这篇关于搜索列表项（菜单）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！