MAIL
利用するのはJavascriptの外部ライブラリ「Choices.js」
今回の実装における要件は以下のように定めます。
①リンク設定されている分類項目でフリーワード入力による検索ができること
②サジェスト結果の選択で、分類項目への入力ができること
あらかじめ、親子関係のある2つのテーブルを用意します。
今回用意した親テーブルがこちらになります。
アルファベット、漢字（47都道府県名）、平仮名とタイトルを複数パターン用意しました。
つぎに、子テーブルの分類Aに親テーブルのID（ここでは「123456」）を設定します。
コントロール種別は「ドロップダウンリスト」、その他の設定は不要です。
そのうえで、子テーブルに以下の設定を行っていきます。
まず、サジェスト機能を実現する方法ですが、外部ライブラリの「Choices.js」を利用することにしました。
今回はCDNからライブラリを読み込みます。
「テーブルの管理」で「HTML」タブを開き、以下のHTMLタグを挿入位置「Head bottom」で追加します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>つぎに、「スクリプト」タブに以下のコードを設定します。
出力先は「新規作成」「編集」とします。
$p.events.on_editor_load = function () {
const element = document.getElementById('Results_ClassA'); // ①分類項目（今回は記録テーブルの分類Aが対象）
if (element) {
const choices = new Choices(element, { // ②Choices.jsのオプション
removeItemButton: true, // 選択した項目の削除を可能に
searchEnabled: true, // サジェスト検索を有効に
allowHTML: true, // HTMLを許可
addItems: true, // フリーワード入力を許可
noResultsText: '該当する項目がありません', // サジェストがない場合のメッセージ
});
}
}スクリプトの内容を、簡単に解説いたします。
①対象となる分類項目を指定します。今回は記録テーブルの分類項目のHTMLから選択肢を作成しています。
②Choices.jsの動作設定をお好みで変えることが可能です
最後に、「スタイル」タブで以下のスタイルを設定します。
Choices.jsのドロップダウン部分のz-indexが低く設定されているため、ドロップダウン部分が他の要素の背後に隠れてしまいます。
CSSのz-indexプロパティは、要素の重なり順（z-order）を指定するためのものです。
要素が重なる場合、z-indexの値が大きい要素が小さい要素の上に表示されます。
例えば、z-indexが10の要素は、z-indexが5の要素の上に表示されます。
そこでドロップダウン部分を上位に表示させるために、z-indexを高めに設定する必要がありました。
#Results_ClassAField .choices__list--dropdown {
z-index: 9999; / 必要に応じて値を調整 /
}実装したスクリプトのサンプル動画が、以下になります。
フリーワード入力欄に文字列を入力すると、部分一致で候補が表示されます。
候補を選択することで分類項目にその文字列が設定され、問題なく登録することも可能です。
まとめ
いかがでしたか？
標準機能の検索とはまた違った使い心地になりました。
紹介内容ではリンク設定でしたが、ルックアップによる選択肢一覧でも同様にサジェスト機能を追加することが可能で、自動ポストバックも動作します。
今回は小さなカスタマイズでしたが、外部ライブラリの利用によるカスタマイズは様々な可能性があり、非常に奥深いです。
弊社ではプリザンターをご使用中、または、これからご使用になられる方向けに、運用ノウハウ集、プリザンター逆引き辞典、スタイル・スクリプトサンプル集、サーバスクリプト大全の販売を行っております。
また、 プリザンターからのExcel帳票出力・PDF帳票出力の支援パック販売 も行っております。
プリザンター導入の支援や、スクリプト開発などの支援も行っておりますので、まずは気軽にご相談ください。
※ご相談の内容によっては有料となる場合がございます。予めご了承ください。
☆☆☆
ブログ内容への質問や追加説明をご希望の方は【 問い合わせフォーム 】からお気軽にお問い合わせください
☆☆☆
リンク項目のドロップダウンリストで素早く選択したい
こんにちは、シーイーシーカスタマサービスの新村です。
プログラミング&プリザンター勉強中の自分が挑戦していることをご紹介していきたいと思います。
親テーブルで管理しているレコードの数が多い場合に「検索機能を使う」を有効に設定している方も多くいらっしゃると思います。
都度検索をしてその中から選択をする、といった操作よりも簡単な「サジェスト機能」を使ってスムーズな検索をできないか？
そんな思いから、今回は子テーブルのリンク設定されている分類項目にサジェスト機能の追加を試みました。
（サジェスト機能とは、入力した文字列が含まれる選択項目の候補を選択肢として表示する機能です）