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

1 回答 1

1

您需要将事件绑定到表单字段并执行 ajax 请求

$('form').submit(function() {
    $.post($(this).attr('action'), $(this).serialize(), function(data) {
        // replace the content section with your new data
    });
    return false;
});
于 2012-05-11T20:20:23.967 回答