2012-05-11 30 views
0

我正在滑下,在它的搜索形式上市,但我不知道如何搜索數據庫和呼應的結果,而不需要刷新頁面,無逼搶DIV幻燈片,我需要在滑動列表中搜索結果,例如在Facebook上搜索。我不知道在哪裏以及如何開始。這是我所做到的。任何提議?搜索結果中向下滑動列表

<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> 

回答

1

你需要一個Ajax請求

$('form').submit(function() { 
    $.post($(this).attr('action'), $(this).serialize(), function(data) { 
     // replace the content section with your new data 
    }); 
    return false; 
}); 
綁定事件到窗體域,做