検索条件コンポーネント

機能説明

検索条件の設定と反映を区別して扱うことができます。
searchcondition 内で起動した検索条件は、form が submit されるまで反映されません。
また、form の action に遷移先 URL を指定することで、検索条件を保ったまま画面遷移することもできます。

See the Pen this by BST developer (@bsearchtech)on CodePen.

設定方法

必須設定

Htmlの修正

検索条件としたいコンポーネントを searchcondition コンポーネントの中に入れます。
searchcondition 内には必ず form を含めるようにしてください。

(属性名が data-[モード] とした例です。)

<div data-[モード]="searchcondition">
  <form method="get">
    <input type="search" name="q" id="q" value="" placeholder="検索キーワード" size="50">
    <input type="submit" name="" value="検索">
  </form>
  <div data-[モード]="attributes-group1"></div>
  <div data-[モード]="attributes-group2"></div>
  <div data-[モード]="sortselector"></div>
  <div data-[モード]="countselector"></div>
</div>

DOM 構造

Dom

searchcondition では dom の生成はありません。