Question

我正在尝试创建一个小型列表搜索，以便在输入内容时弹出列表。我正在使用jquery来修剪列表，因为找不到匹配项，但我无法弄清楚如何保留URL。

有人可以指出如何更改“追加”部分以保持列表的完整性以及所有相关信息吗？

代码如下

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type='text/javascript' src='jquery-1.9.1.min.js'></script> 

    <style>
        ul.drop a { display:block; color: #fff;}
        ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px   solid #fff; background: #555; color: #fff;}
        ul.drop { position: relative; }
        ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
        ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; background: #555; border: 1px solid #fff; }
    </style>

    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function(){
            $(function() {
                var opts = $('#menu li').map(function(){
                    return [[this.value, $(this).text()]];
                });

                $('#menu').click(function() {
                    var txt = $(this).text();
                    alert(txt);
                });

                $('#someinput').keyup(function(){
                    var rxp = new RegExp($('#someinput').val(), 'i');
                    var optlist = $('#menu').empty();
                    opts.each(function(){
                      if (rxp.test(this[1])) {
                          optlist.append($('<li>').text(this[1]));
                  }
                    });

                });

            });

        });//]]>  

    </script> 
</head>
<body>

    <input id="someinput" onkeydown="document.getElementById('menu').style.visibility = 'visible';" onblur="document.getElementById('menu').style.visibility = 'hidden';">

    <ul id="nav" class="drop">
        <ul id="menu">
          <li><a href="#" onclick=">History</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Testimonials</a></li>
          <li><a href="#">Staff</a></li>
          <li><a href="#">FAQs</a></li>
        </ul>
    </ul>

</body>

Answer 1

            $('#someinput').keyup(function(){
                var rxp = new RegExp($(this).val(), 'i');
                $("#menu li").each(function(){
                  // .toggle() will show or hide the element depending on the argument
                  $(this).toggle(rxp.test($(this).text()));
                });
            });

JQuery附加列表项并保留URL

1 个答案: