複数汎用数値絞り込みコンポーネント¶

機能説明¶

複数汎用数値1 〜 5 に対応する絞り込みを行うフォームを表示します。

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

設定方法¶

必須設定¶

Htmlの修正

識別子 multinumericNinput にN = 1 ~ 5を指定することができます。

<div data-[モード]="multinumeric1input"></div>

任意設定¶

表示用メッセージの変更

sitesearchMessage という変数に次のような指定を行うことで、表示文字列を変更することができます。

var sitesearchMessage = {
    multiNumeric1Input: {
        label: '',
        prefix: '',
        suffix: '',
        range: '~',
        update: '更新',
        clear: 'クリア',
    },    
};

キー名	デフォルト値	説明
label	''	複数汎用数値絞り込みコンポーネントのラベル
prefix	''	複数汎用数値絞り込みコンポーネントで入力ボックスの前に表示
suffix	''	複数汎用数値絞り込みコンポーネントで入力ボックスの後ろに表示
range	'〜'	複数汎用数値絞り込みコンポーネントで入力ボックスの間に表示
update	'更新'	パラメータ multiNumericNInputUpdateEvents が click の際に表示される更新ボタンのラベル
clear	'クリア'	パラメータ multiNumericNInputUpdateEvents が click の際に表示されるクリアボタンのラベル

関連する設定パラメータの追加

var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
    uid: "[UID]",
    mode: "[モード]",
    inputId: "q",

    multiNumeric1InputUpdateEvents: ['blur'],
    multiNumeric1InputStep: 1,
    multiNumeric1InputMinLimit: 0,
    multiNumeric1InputMaxLimit: null,
    multiNumeric1DataMagnification: 'x1',
};

パラメータ名	データ型	デフォルト値	説明
multiNumericNInputUpdateEvents	配列 (blur, clickから選択)	['blur']	複数汎用数値絞り込みコンポーネントを更新するタイミングを指定 blur はフォーカスが外れたタイミングで更新される click はボタンが表示され、ボタンを押下したタイミングで更新される
multiNumericNInputStep	数値	1	複数汎用数値絞り込みコンポーネントにおいて、フォーム内のステップ幅を指定
multiNumericNInputMinLimit	数値	0	複数汎用数値絞り込みコンポーネントにおいて、入力可能な最小値を指定
multiNumericNInputMaxLimit	数値	null	複数汎用数値絞り込みコンポーネントにおいて、入力可能な最大値を指定
multiNumericNDataMagnification	文字列 (x1, x10, x100, x1000 から選択)	'x1'	データ登録時に小数値のデータを 10 倍 / 100 倍などして整数値に正規化して登録した場合、適用した倍率を指定本パラメータの倍率を揃えることで、表示時に倍率が考慮されて表示されます。この設定は、複数汎用数値絞り込みコンポーネント内のフォーム、および複数汎用数値Nをレイアウトとして表示する際に有効です

DOM 構造¶

Dom

複数汎用数値絞り込みコンポーネント¶

対象とする汎用数値フィールドによって DOM 構造が変化します。

例: 汎用数値 1

<div data-[モード]="multinumeric1input" class="_[モード]_component">
  <div class="_multi_numeric1input">
    <!-- 通常表示されないが、メッセージリソースの設定により表示されます -->
    <div class="_label"></div>
    <div class="_form">
      <div class="_multi_numeric1group">
        <!-- メッセージリソースの設定により表示されます -->
        <span class="_prefix"></span>
        <input class="_min" name="n1min" type="number" min="0" value="" />
        <!-- メッセージリソースの設定により表示されます -->
        <span class="_suffix">円</span>
      </div>
      <span class="_range">〜</span>
      <div class="_pricegroup">
        <!-- メッセージリソースの設定により表示されます -->
        <span class="_prefix"></span>
        <input class="_max" name="n1max" type="number" min="0" value="" />
        <!-- メッセージリソースの設定により表示されます -->
        <span class="_suffix"></span>
      </div>
    </div>
    <div class="_submit">更新</div>
  </div>
</div>