2013-05-02 5 views
0

작은 목록 검색을 작성하여 입력 할 때 목록이 팝업되도록하려고합니다. 일치하는 항목이 발견되면 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> 
+1

다음과 같이

코드는? – Barmar

+0

어떤 해결책이 좋을까요. 문제는 말 그대로 20 분 전에 jquery를 사용하기 시작했기 때문에 아직 아무 것도하지 않는 것입니다. 검색을 통해 목록을 축소하는 코드를 얻었으므로, 대략 내가 뭘 찾고 있었는지 알기까지 잘라 냈습니다. – Scott

답변

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

그 트릭을 멋지게, 당신의 도움에 대단히 감사합니다 :) – Scott

관련 문제