パソコン版のコードをモバイル版に修正してモバイル版kintoneの一覧表に検索窓を設置しました。
検索機能は問題ないのですが、並び替え等、一覧表を再表示する（mobile.app.record.index.showイベントが実施される）度に、
検索窓と検索ボタンが増えていってしまいます。
パソコン版では、kintone.app.getHeaderMenuSpaceElement()をつかって、検索窓や検索ボタンを一旦削除し、再作成する以下のコードをいれているのですが、
var node_space = kintone.app.getHeaderMenuSpaceElement()
for (var i =node_space.childNodes.length-1; i>=0; i–) {
node_space.removeChild(node_space.childNodes[i]);
}
var label = document.createElement(‘label’);
label.appendChild(document.createTextNode(’ ‘));
label.appendChild(document.createTextNode(‘カナ氏名検索’));
label.appendChild(document.createTextNode(’ ‘));
label.appendChild(SW_カナ氏名);
label.appendChild(document.createTextNode(’ ‘));
label.appendChild(search_button);
label.appendChild(document.createTextNode(’ '));
kintone.app.getHeaderMenuSpaceElement().appendChild(label);
どうやらモバイル版では
kintone.mobile.app.getHeaderMenuSpaceElement()が無いようです。
mobile.app.record.index.showで再表示した場合でも、検索窓と検索ボタンが増えていかないようにするにはどうすればよいでしょうか？
コードは以下のようになっています。調べながら作った初めてのコードなので、無駄な部分とかもあるかもしれません。よろしくお願いいたします。
(function () {
‘use strict’;
// 検索対象フィールドの名前
const FC_カナ氏名 = ‘検索用カナ氏名’;
// KanaHenkan関数の定義
function KanaHenkan(str) {
var kanaMap = {
“が”: “ｶﾞ”, “ぎ”: “ｷﾞ”, “ぐ”: “ｸﾞ”, “げ”: “ｹﾞ”, “ご”: “ｺﾞ”,
“ざ”: “ｻﾞ”, “じ”: “ｼﾞ”, “ず”: “ｽﾞ”, “ぜ”: “ｾﾞ”, “ぞ”: “ｿﾞ”,
“だ”: “ﾀﾞ”, “ぢ”: “ﾁﾞ”, “づ”: “ﾂﾞ”, “で”: “ﾃﾞ”, “ど”: “ﾄﾞ”,
“ば”: “ﾊﾞ”, “び”: “ﾋﾞ”, “ぶ”: “ﾌﾞ”, “べ”: “ﾍﾞ”, “ぼ”: “ﾎﾞ”,
“ぱ”: “ﾊﾟ”, “ぴ”: “ﾋﾟ”, “ぷ”: “ﾌﾟ”, “ぺ”: “ﾍﾟ”, “ぽ”: “ﾎﾟ”,
“ヴ”: “ｳﾞ”, “ヷ”: “ﾜﾞ”, “ヺ”: “ｦﾞ”,
“あ”: “ｱ”, “い”: “ｲ”, “う”: “ｳ”, “え”: “ｴ”, “お”: “ｵ”,
“か”: “ｶ”, “き”: “ｷ”, “く”: “ｸ”, “け”: “ｹ”, “こ”: “ｺ”,
“さ”: “ｻ”, “し”: “ｼ”, “す”: “ｽ”, “せ”: “ｾ”, “そ”: “ｿ”,
“た”: “ﾀ”, “ち”: “ﾁ”, “つ”: “ﾂ”, “て”: “ﾃ”, “と”: “ﾄ”,
“な”: “ﾅ”, “に”: “ﾆ”, “ぬ”: “ﾇ”, “ね”: “ﾈ”, “の”: “ﾉ”,
“は”: “ﾊ”, “ひ”: “ﾋ”, “ふ”: “ﾌ”, “へ”: “ﾍ”, “ほ”: “ﾎ”,
“ま”: “ﾏ”, “み”: “ﾐ”, “む”: “ﾑ”, “め”: “ﾒ”, “も”: “ﾓ”,
“や”: “ﾔ”, “ゆ”: “ﾕ”, “よ”: “ﾖ”,
“ら”: “ﾗ”, “り”: “ﾘ”, “る”: “ﾙ”, “れ”: “ﾚ”, “ろ”: “ﾛ”,
“わ”: “ﾜ”, “を”: “ｦ”, “ん”: “ﾝ”,
“ぁ”: “ｱ”, “ぃ”: “ｲ”, “ぅ”: “ｳ”, “ぇ”: “ｴ”, “ぉ”: “ｵ”,
“っ”: “ﾂ”, “ゃ”: “ﾔ”, “ゅ”: “ﾕ”, “ょ”: “ﾖ”,
“ガ”: “ｶﾞ”, “ギ”: “ｷﾞ”, “グ”: “ｸﾞ”, “ゲ”: “ｹﾞ”, “ゴ”: “ｺﾞ”,
“ザ”: “ｻﾞ”, “ジ”: “ｼﾞ”, “ズ”: “ｽﾞ”, “ゼ”: “ｾﾞ”, “ゾ”: “ｿﾞ”,
“ダ”: “ﾀﾞ”, “ヂ”: “ﾁﾞ”, “ヅ”: “ﾂﾞ”, “デ”: “ﾃﾞ”, “ド”: “ﾄﾞ”,
“バ”: “ﾊﾞ”, “ビ”: “ﾋﾞ”, “ブ”: “ﾌﾞ”, “ベ”: “ﾍﾞ”, “ボ”: “ﾎﾞ”,
“パ”: “ﾊﾟ”, “ピ”: “ﾋﾟ”, “プ”: “ﾌﾟ”, “ペ”: “ﾍﾟ”, “ポ”: “ﾎﾟ”,
“ヴ”: “ｳﾞ”, “ヷ”: “ﾜﾞ”, “ヺ”: “ｦﾞ”,
“ア”: “ｱ”, “イ”: “ｲ”, “ウ”: “ｳ”, “エ”: “ｴ”, “オ”: “ｵ”,
“カ”: “ｶ”, “キ”: “ｷ”, “ク”: “ｸ”, “ケ”: “ｹ”, “コ”: “ｺ”,
“サ”: “ｻ”, “シ”: “ｼ”, “ス”: “ｽ”, “セ”: “ｾ”, “ソ”: “ｿ”,
“タ”: “ﾀ”, “チ”: “ﾁ”, “ツ”: “ﾂ”, “テ”: “ﾃ”, “ト”: “ﾄ”,
“ナ”: “ﾅ”, “ニ”: “ﾆ”, “ヌ”: “ﾇ”, “ネ”: “ﾈ”, “ノ”: “ﾉ”,
“ハ”: “ﾊ”, “ヒ”: “ﾋ”, “フ”: “ﾌ”, “ヘ”: “ﾍ”, “ホ”: “ﾎ”,
“マ”: “ﾏ”, “ミ”: “ﾐ”, “ム”: “ﾑ”, “メ”: “ﾒ”, “モ”: “ﾓ”,
“ヤ”: “ﾔ”, “ユ”: “ﾕ”, “ヨ”: “ﾖ”,
“ラ”: “ﾗ”, “リ”: “ﾘ”, “ル”: “ﾙ”, “レ”: “ﾚ”, “ロ”: “ﾛ”,
“ワ”: “ﾜ”, “ヲ”: “ｦ”, “ン”: “ﾝ”,
“ァ”: “ｱ”, “ィ”: “ｲ”, “ゥ”: “ｳ”, “ェ”: “ｴ”, “ォ”: “ｵ”,
“ッ”: “ﾂ”, “ャ”: “ﾔ”, “ュ”: “ﾕ”, “ョ”: “ﾖ”,
“。”: “”, “、”: “”, “ー”: “”, “「”: “”, “」”: “”, “・”: “”,
" ": “”,
‘ｧ’: ‘ｱ’, ‘ｨ’: ‘ｲ’, ‘ｩ’: ‘ｳ’, ‘ｪ’: ‘ｴ’, ‘ｫ’: ‘ｵ’,
‘ｯ’: ‘ﾂ’, ‘ｬ’: ‘ﾔ’, ‘ｭ’: ‘ﾕ’, ‘ｮ’: ‘ﾖ’,
‘｡’: ‘’, ‘｢’: ‘’, ‘｣’: ‘’, ‘､’: ‘’, ‘･’: ‘’, ‘ｰ’: ‘’,
’ ': ‘’, ’ ': ‘’ // 全角カナを半角カナにし、小さな文字も大きな文字に変換し、不要なものを削除
};
var reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g');
return str.replace(reg, (match) => kanaMap[match]); }
// レコード一覧表示のイベントハンドラー
kintone.events.on(“mobile.app.record.index.show”, function (event) {
// GET引数に格納された直前の検索キーワードを取得して再表示
var result = {};
var query = window.location.search.substring(7);
if (query) {
var element = query.split(' like ');
if (element.length === 2) {
var param_field_code = decodeURIComponent(element[0].trim());
var param_search_word = decodeURIComponent(element[1].trim().replace(/["]/g, ""));
result[param_field_code] = param_search_word;
}
}
// 検索キーワードの入力フィールドとボタンの作成
var searchContainer = document.createElement('div');
var SW_カナ氏名 = document.createElement('input');
SW_カナ氏名.type = 'text';
SW_カナ氏名.placeholder = 'カナ氏名を入力';
var search_button = document.createElement('input');
search_button.type = 'submit';
search_button.value = '検索';
// 既にURLにクエリが含まれている場合、その値を入力ボックスに再表示
if (result[FC_カナ氏名]) {
SW_カナ氏名.value = decodeURIComponent(result[FC_カナ氏名]);
}
searchContainer.appendChild(SW_カナ氏名);
searchContainer.appendChild(search_button);
kintone.mobile.app.getHeaderSpaceElement().appendChild(searchContainer);
// 検索を実行する関数
function keyword_search() {
var keyword = SW_カナ氏名.value;
var convertedKeyword = KanaHenkan(keyword);
var str_query = '?query=' + FC_カナ氏名 + ' like "' + convertedKeyword + '"';
if (keyword === "") {
str_query = "";
}
// 検索結果のURLへ
document.location = location.origin + location.pathname + str_query;
}
// 検索ボタンのクリックイベント
search_button.onclick = function () {
keyword_search();
};
// Enterキーが押された時のイベント
SW_カナ氏名.onkeypress = function (event) {
if (event.key === 'Enter') {
keyword_search();
}
};
//重複を避けるため要素をあらかじめクリアしておく
var node_space = kintone.mobile.app.getHeaderMenuSpaceElement()
for (var i =node_space.childNodes.length-1; i>=0; i--) {
node_space.removeChild(node_space.childNodes[i]);
}
var label = document.createElement('label');
label.appendChild(document.createTextNode(' '));
label.appendChild(document.createTextNode('カナ氏名検索'));
label.appendChild(document.createTextNode(' '));
label.appendChild(SW_カナ氏名);
label.appendChild(document.createTextNode(' '));
label.appendChild(search_button);
label.appendChild(document.createTextNode(' '));
kintone.mobile.app.getHeaderMenuSpaceElement().appendChild(label);
return event;
});
})();