슬라이드 다운 목록에서 검색 결과

Question

검색 양식이 포함 된 슬라이드 아래로 작업 중이지만 데이터베이스를 검색하고 페이지를 다시로드하지 않고 슬라이드를 닫지 않고 결과를 에코하는 방법을 모르겠습니다. div , 나는 슬라이딩리스트에서 검색 결과를 필요로한다. 페이스 북 검색과 같은 것이다. 나는 어디서 어떻게 시작해야할지 모른다. 이것은 내가 지금까지했던 일이다. 어떤 제안?

<script> 
     $(document).ready(function() { 
      $('#nav li').hover(
       function() { 
        $('ul', this).stop(true, true).slideDown(200); 
       }, 
       function() { 
        $('ul', this).stop(true, true).slideUp(200); 
       }); 
     }); 
    </script> 

     <div style=' 
     background-color:#D6DEE6; 
     border-bottom:1px solid #6382A1; 
     height:10px; 
     width:100%; 
     margin-top:-1px; 
     -webkit-box-shadow: 5px 5px 15px #dddddd; 
     box-shadow: 5px 5px 15px #dddddd;'> 
     </div> 


     <ul id='nav'> 

     <li style=' 
     background-color:#D6DEE6; 
     border-bottom:1px solid #6382A1; 
     margin-top:-0.5px; 
     width:268px; 
     margin-left:0%; 
     border-right:1px solid #6382A1; 
     border-left:1px solid #6382A1; 
     height:25px; 
     -moz-border-radius:0px 0px 5px 0px; 
     border-radius:0px 0px 5px 0px; 
     -webkit-box-shadow: 5px 5px 15px #dddddd; 
     box-shadow: 5px 5px 15px #dddddd;'> 
     <div class='linko_slide'> 
    <a href=''><font face='candara' size='4'>Search menu</font> 

<img src='slike_izgled/slide_down.png' width='25' height='10' 
style='margin-left:15px;'></a> 
</div> 
<ul style='background-color:#D6DEE6; border:1px solid #6382A1; 
    padding:5px; width:350px; margin-top:0px; height:350; 
    -webkit-box-shadow: 5px 5px 15px #dddddd; 
    box-shadow: 5px 5px 15px #dddddd; 
    -moz-border-radius:8px 8px 0px 0px; 
    border-radius:0px 8px 8px 0px; 
    padding-bottom:0px; padding-right:10px;'> 

<!--search in list start!--> 
    <form> 
    <input type='text' name='search_dosje'> 
    <input type='submit' name='search_q' value='Pretraži' 
    style='border:1px solid #8099B3; background:url(slike_izgled/naslovi_table.png);     
height:24px; 
-moz-border-radius:0px 5px 5px 0px; font-family:candara; font-size:15; 
border-radius:0px 5px 5px 0px; padding-bottom:3; padding-left:3; padding-right:3;'> 
          </form> 



    </div> 
    <!--end of listing!--> 
            </ul> 
           </li> 
          </ul> 

Answer 1

당신은 아약스 요청

$('form').submit(function() { 
    $.post($(this).attr('action'), $(this).serialize(), function(data) { 
     // replace the content section with your new data 
    }); 
    return false; 
}); 

에게 양식 필드에 이벤트를 바인딩하고 할 필요가