搜索结果在下滑列表中 - Search result in slide down list

Search result in slide down list

本文关键字：列表搜索结果 | 更新日期: 2023-09-27

我正在处理带有搜索表单的下滑列表，但我不确定如何在不重新加载页面和不关闭下滑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>

您需要

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

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