JQuery附加列表项并保留URL

我正在尝试创建一个小列表搜索，以便在输入内容时弹出列表。我正在使用jQuery来修剪列表，因为找到匹配，但我无法弄清楚如何保持URL的位置。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>

来源

2013-05-02 Scott

而不是删除和附加列表中的项目，为什么不隐藏和显示他们的？ – Barmar 2013-05-02 09:59:34

任何解决方案都会很棒。问题是我从20分钟前刚刚开始使用jquery，所以我真的不知道如何处理它。我找到了一些代码，让搜索列表缩小，然后剪切，直到我大致找到了我想要的内容为止。 – Scott 2013-05-02 10:05:10

  $('#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())); 
       }); 
      });

来源

2013-05-02 10:10:26 Barmar

这很棒，非常感谢您的帮助:) – Scott 2013-05-02 10:16:38

JQuery附加列表项并保留URL

回答

相关问题