Question

我正在使用搜索表单在下拉列表中工作，但是我不确定如何搜索数据库并回显结果而不重新加载页面而不关闭向下滑动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>

Answer 1

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

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

在下拉列表中搜索结果

1 个答案: