2017-12-30 46 views
0
<div class="container"> 
       <div class="row">  
        <div class="col-xs-8 col-xs-offset-2"> 

         <div class="input-group"> 
          <div class="input-group-btn search-panel"> 

           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
            <span id="search_concept">Filter</span> <span class="caret"></span> 
           </button> 
           <ul class="dropdown-menu" role="menu"> 
            <li><a href="#Electronics">electronics</a></li> 
          <li><a href="#Movies">movies</a></li> 

            <li class="divider"></li> 
            <li><a href="#all">All</a></li> 
           </ul> 
          </div> 
        <form method="POST" name="form" action="#"> 

           <input type="hidden" name="search_param" value="all" id="search_param">   
           <input type="text" class="form-control" name="x" id="query" placeholder="Search term..."> 
           <span class="input-group-btn"> 
            <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
         </span> 

        </form> 
         </div> 

        </div> 
        </div> 
       </div> 

ISSUE私はボタンを押します 毎回。私は同じページにリダイレクトします。私はしかし、ドロップダウンの行為によってファンキーな欲しい;フォームが提出された後にドロップダウンメニューの中の適切な選択されたフィルタで 'フィルタ'ボタンを置き換えないように。ここにそのコードがあります。しかし、私はgoボタンを押す前に、それは期待どおりに動作します。何が起こっているのでしょうか?フォームを送信

<script> 
     $(document).ready(function(e){ 
       $('.search-panel .dropdown-menu').find('a').click(function(e) { 
       e.preventDefault(); 
       var param = $(this).attr("href").replace("#",""); 
       var concept = $(this).text(); 
       $('.search-panel span#search_concept').text(concept); 
       $('.input-group #search_param').val(param); 
       }); 
      }); 

    </script> 

JS FIDDLE:https://jsfiddle.net/0e37tvyx/

+0

を作成する –

+0

フィルタのドロップダウンリストは何をすべきですか? 入力ボックスのテキストはフィルタのドロップダウンとは何ですか? 検索が完了した後に何が起こるはずですか? –

答えて

0

この中には何も間違っています。あなたのフィドルコードは、すべてのUI変更操作でうまく動作します。しかし、フォームがPOSTメソッドをサポートしているため、すべてのフォームパラメータはPOSTリクエストとして送信されます。

  • 使用AJAX要求の代わりに、フォームはページ全体の更新を提出

      :あなたは最後に選択したフィルタの状態を保存するための3つの可能な選択肢を(あまりにもそれ以上でもよい)があります。このようにして、ページ内のサーバーレスポンスのコンテンツを追加する必要があります。それは検索結果です。

    1. コンテンツが動的に生成されている場合。あなたがPHP/JSP/ASP/Any Other Templating Libraryを使用しているとします。これを使用して、検索リクエストに基づいてHTMLコードを更新することができます。つまり、search_paramリクエストパラメータです。

    2. 他の方法はクッキーを使用することです。ユーザーがフロントエンドのオプションを変更すると、フィルタオプションsearch_paramがクッキーに保持されます。そして、文書のreadyの状態で; Cookieに保存されていない場合は、保存されているクッキーを読み込み、デフォルトのオプションallに置き換えます。

    クッキーベースの実装については、 jQueryのクッキープラグインを追加したわけではありません。

    https://jsfiddle.net/ksbora/3w6k171f/2

    注:Cookiesはあまりにも、クロスサイト発信制限サイズの制限があります。だから、どのオプションを選ぶか注意してください。