検索窓の検索キーワードを残したいです。

Legacy_Account2625 · 2021 年 3 月 9 日午前 3:20

プログラミング初心者です。

下記の通り実現できなくて困っています。

ソースコードは皆さんやチュートリアルにある情報をいっぱい参照して、

自社用にカスタマイズをしてみました。

背景・実現したいこと

検索窓①（３つのフィールドを検索）と検索窓②（日付検索）を設置しており、

入力するときに色が変わるようにしておき（ここは後日cssで定義することができました。）、検索は検索ボタンを押すか、Enterキーで動くようにする。

検索自体は問題なくできるようになりました。

ただ、検索値が検索窓に残るようにできず、他のホームページやコミュニティの書き込みを閲覧しながら試作しましたが、実現できずじまいです。

検索窓に検索ワードを残す方法

などなどいろいろと参照しましたが、どこにどう入れたらよいのか、素人すぎてわかりませんでした。。。

お知恵を頂けると嬉しいです。

以下、ソースコードです。

利用したソースコード

//ふぃーるどフィールドコードは一対一
const FIELD_CODE = 'ID';
const FIELD_CODE2 = '物件名称';
const FIELD_CODE3 = '文字列__複数行_'
const AND_OR = "or";
const FIELD_CODE4 = '日付';
//andかorを小文字で入れる、今回はor
//レコード一覧表示のイベントハンドラー
(function () {
 'use strict';
 
  kintone.events.on("app.record.index.show", function (event) {
 
    //GET引数に格納された直前の検索キーワードを取得して再表示
    var result = {};
    //クエリから、URL固定部分(?query=)を無視して取り出す
    var query = window.location.search.substring(7);
    // クエリ検索条件の区切り記号 (and/or) で分割
var parameters = query.split( AND_OR );

    //フィールドコード名と検索キーワードに分割する
    for(var i = 0;i < parameters.length;i++){
     var element = parameters[i].split('like');
     var param_field_code = encodeURIComponent(element[0]);
     var param_search_word = encodeURIComponent(element[1]);

      //空白スペースを取り除いて、配列に格納
  result[param_field_code.replace(/^\s+|\s+$/g, "")] = param_search_word.replace(/^[\s|\"]+|[\s|\"]+$/g, "");
 }
    //検索キーワード1
    var search_word1 = document.createElement('input');
    search_word1.type = 'text';
  search_word1.style.display = 'inline-block';
search_word1.style.backgroundColor = '#EEEEEE';
search_word1.style.height = '45px';
search_word1.style.width = '170px';
search_word1.style.border = 'solid 2px #999999';
search_word1.style.color = '#00008B';
  search_word1.value ='ID・物件名・備考検索';
  search_word1.style.color = 'gray';

// 入力フォーカスを得たときの処理
search_word1.onfocus = function() {
search_word1.style.backgroundColor = '#F0F8FF';
search_word1.style.border = 'solid 2px #6495ED';
if( search_word1.value === search_word1.defaultValue ){
search_word1.value = '';
search_word1.style.color = '';
}
}
// 入力フォーカスを失ったときの処理
search_word1.onblur = function() {
  search_word1.style.backgroundColor = '#EEEEEE';
  search_word1.style.border = 'solid 2px #999999';
if( search_word1.value === '' ){
search_word1.value = search_word1.defaultValue;
  search_word1.style.color = 'gray';
}
}
// 透かし文字をdefaultValueプロパティで保持する
search_word1.defaultValue = search_word1.value;
search_word1.value = '';
       search_word1.onblur();
//-->

search_word1.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}
//検索キーワード2
    var search_word2 = document.createElement('input');
    search_word2.type = 'Date';
  search_word2.style.display = 'inline-block';
search_word2.style.backgroundColor = '#EEEEEE';
search_word2.style.height = '45px';
search_word2.style.width = '160px';
search_word2.style.border = 'solid 2px #999999';
search_word2.style.color = '#00008B';
  search_word2.style.color = 'gray';
// 入力フォーカスを得たときの処理
search_word2.onfocus = function() {
search_word2.style.backgroundColor = '#F0F8FF';
search_word2.style.border = 'solid 2px #6495ED';
if( search_word2.value == search_word2.defaultValue ){
search_word2.value = '';
search_word2.style.color = '';
}
}
// 入力フォーカスを失ったときの処理
search_word2.onblur = function() {
search_word2.style.backgroundColor = '#EEEEEE';
  search_word2.style.border = 'solid 2px #999999';
if( search_word2.value === '' ){
search_word2.value = search_word2.defaultValue;
search_word2.style.color = 'gray';
}
}

search_word2.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}
    //検索ボタン表示
    var search_button = document.createElement('input');
    search_button.type = 'submit';
//    search_button.style.FontSize = 'xx-small';
    search_button.style.display = 'inline-block';
search_button.style.backgroundColor = '#F0F8FF';
search_button.style.height = '45px';
search_button.style.width = '45px'
search_button.style.border = 'solid 1px #6495ED';
  search_button.value = '検索';
    search_button.onclick = function () {
     keyword_search();
    };
 
    //キーワード検索の関数
    function keyword_search(){
     var keyword1 = search_word1.value;
     var keyword2 = search_word2.value;
//ここがクエリ
     var str_query = '?query='+ FIELD_CODE +' like "' + keyword1 + '" ' + AND_OR +' '+ FIELD_CODE2 +' like "' + keyword1 + '"' + AND_OR +' '+ FIELD_CODE3 +' like "' + keyword1 + '"'+ AND_OR +' '+ FIELD_CODE4 +' = "' + keyword2 + '"';

if(keyword1 === "" &&keyword2===""){
str_query = "";
}else if(keyword1 !== ""&&keyword2===""){
str_query = '?query='+ FIELD_CODE +' like "' + keyword1 + '" ' + AND_OR +' '+ FIELD_CODE2 +' like "' + keyword1 + '"' + AND_OR +' '+ FIELD_CODE3 +' like "' + keyword1 + '"'
}else if(keyword1 === ""&&keyword2 !==""){
str_query = '?query='+ FIELD_CODE4+' = "' + keyword2 + '"'
}   
//検索結果のURLへ
    document.location = location.origin + location.pathname + str_query
    }
 
    //重複を避けるため要素をあらかじめクリアしておく
    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(search_word1);
    label.appendChild(document.createTextNode(' '+ AND_OR +' '));
    label.appendChild(document.createTextNode(' '));
    label.appendChild(search_word2);
    label.appendChild(document.createTextNode(' '));
    label.appendChild(search_button);
    kintone.app.getHeaderMenuSpaceElement().appendChild(label);
 
    return event;
  });
})();

Legacy_Account2625 · 2021 年 3 月 11 日午前 8:44

投稿者です。

試行錯誤を繰り返し、なんとかできるようになりました。

一つはクエリのところを修正したのと、

if(result[FIELD_CODE1] !== undefined){
search_word1.value = result[FIELD_CODE1]; // GET引数に、直前の検索キーワードがあったら格納しておく
}

という部分を各FIELD_CODEずつ作りました。

素人がつくったので、スマートではなく変なコードもあるかもしれませんが…。

日付の検索値も残るようになりました。

同じようなことで困っている方もいるかもと思ったのと、

今後の自分の勉強のために、コードを残したいと思います。

もうちょっとスマートな書き方があるよーというのをご存じでしたら、教えていただけると幸いです。

また、こちらの投稿を目にした方がいらっしゃっいましたら、不具合が起きそうな点などご指摘いただけると嬉しいです。

ご覧いただきありがとうございました。

// 設定値
const FIELD_CODE1 = “警備ID”;
const FIELD_CODE2 = “内容”;
const FIELD_CODE3 = “物件名称”;
const AND_OR = “or”; // 必ず小文字
const FIELD_CODE4 = “日付”;

// 一覧表示のタイミングで実行
(function () {
“use strict”;
kintone.events.on(“app.record.index.show”,function (event) {
// ボタン増殖バグを防ぐ：念のため挿入
if (document.getElementById(‘my_seach_button’) !== null) {
return;
}

//CSSクラス定：ボタンと検索フォーム
var btnClassName = ‘sample-class2’;
var entClassName = ‘sample-class3’;
// GET引数に格納された直前の検索キーワードを取得して再表示する
var result = {};
var query = window.location.search.substring( 7 ); // URL固定部分(?query=)は無視

// クエリ検索条件の区切り記号 (and/or) で分割
var parameters = query.split( AND_OR );

// フィールドコード名と検索キーワードに分割する
for( var i = 0; i < parameters.length; i++ ){
var element = parameters[i].split( ‘like’ );
var paramName = decodeURIComponent( element[0] );
var paramValue = decodeURIComponent( element[1] );
//日付検索検索のためにiiも宣言
for( var ii = 0; ii < parameters.length; ii++ ){
var element2 = parameters[ii].split( ‘=’ );
var paramName2 = decodeURIComponent( element2[0] );
var paramValue2 = decodeURIComponent( element2[1] );

// スペースと""をtrimして、文字列だけにしてから、配列に格納
result[paramName.replace(/^\s+|\s+$/g, “”)] = paramValue.replace(/^[\s|"]+|[\s|"]+$/g, “”);
}
result[paramName2.replace(/^\s+|\s+$/g, “”)] = paramValue2.replace(/^[\s|"]+|[\s|"]+$/g, “”);
}

// 検索キーワードその１
var search_word1 = document.createElement(‘input’);
search_word1.type = ‘text’;
search_word1.className = entClassName;
search_word1.value =‘ID・物件名・内容’;
search_word1.style.color = ‘gray’;

// 入力フォーカスを得たときの処理
search_word1.onfocus = function() {
search_word1.className = entClassName;
if( search_word1.value === search_word1.defaultValue ){
search_word1.value = ‘’;
search_word1.style.color = ‘’;
}
};
// 入力フォーカスを失ったときの処理
search_word1.onblur = function() {
search_word1.className = entClassName;
if( search_word1.value === ‘’ ){
search_word1.value = search_word1.defaultValue;
search_word1.style.color = ‘gray’;
}
};
// 透かし文字をdefaultValueプロパティで保持する
search_word1.defaultValue = search_word1.value;
search_word1.value = ‘’;
search_word1.onblur()

search_word1.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}

if(result[FIELD_CODE1] !== undefined){
search_word1.value = result[FIELD_CODE1]; // GET引数に、直前の検索キーワードがあったら格納しておく
}
if(result[FIELD_CODE2] !== undefined){
search_word1.value = result[FIELD_CODE2]; // GET引数に、直前の検索キーワードがあったら格納しておく
}
if(result[FIELD_CODE3] !== undefined){
search_word1.value = result[FIELD_CODE3]; // GET引数に、直前の検索キーワードがあったら格納しておく
}

// 検索キーワードその２
var search_word2 = document.createElement(‘input’);
search_word2.type = “Date”;
search_word2.className = entClassName;
search_word2.style.color = ‘gray’;

// 入力フォーカスを得たときの処理
search_word2.onfocus = function() {
search_word2.className = entClassName;
if( search_word2.value === search_word2.defaultValue ){
search_word2.value = ‘’;
search_word2.style.color = ‘’;
}
};
// 入力フォーカスを失ったときの処理
search_word2.onblur = function() {
search_word2.className = entClassName;
if( search_word2.value === ‘’ ){
search_word2.value = search_word2.defaultValue;
search_word2.style.color = ‘gray’;
}
};
// 透かし文字をdefaultValueプロパティで保持する
search_word2.defaultValue = search_word2.value;
search_word2.value = ‘’;
search_word2.onblur()

search_word2.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}

if(result[FIELD_CODE4] !== undefined){
search_word2.value = result[FIELD_CODE4]; // GET引数に、直前の検索キーワードがあったら格納しておく
}

// 検索ボタン
var search_button = document.createElement(‘input’);
search_button.id = ‘my_seach_button’;
search_button.type = ‘submit’;
search_button.className = btnClassName; // CSSクラスを指定
search_button.value = ‘検索’;
search_button.onclick = function () {
keyword_search();
};
//検索ワードクリアボタン
var clear_button = document.createElement(‘input’);
clear_button.type =‘submit’;
clear_button.className = btnClassName; // CSSクラスを指定
clear_button.value =‘クリア’;
clear_button.onclick = function () {
search_word1.value = search_word1.defaultValue;
search_word2.value = search_word2.defaultValue;
};

// キーワード検索の関数
function keyword_search(){
var keyword1 = search_word1.value;
var keyword2 = search_word2.value;
var str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '” ’

AND_OR +’ ‘+ FIELD_CODE2 +’ like “’ + keyword1 + '” ’
AND_OR +’ ‘+ FIELD_CODE3 +’ like “’ + keyword1 + '” ’
AND_OR +’ ‘+ FIELD_CODE4 +’ = “’ + keyword2 + '” ';

if(keyword1 === “” && keyword2 === “”){
str_query = “”;
}else if(keyword1 !== “” && keyword2 === “”){
str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '” ’

AND_OR +’ ‘+ FIELD_CODE2 +’ like “’ + keyword1 + '” ’
AND_OR +’ ‘+ FIELD_CODE3 +’ like “’ + keyword1 + '” ‘;
}else if(keyword1 === “” && keyword2 !== “”){
str_query = ‘?query=’+ FIELD_CODE4 +’ = “’ + keyword2 + '” ';
}

//alert(str_query);
// GET変数を使って、検索結果へジャンプ！
document.location = location.origin + location.pathname + str_query;
}

// キーワード入力部品を、kintoneヘッダ部分に埋め込む(重複を避けるため、最初に要素をクリアしておく)
var aNode = kintone.app.getHeaderMenuSpaceElement()
for (var i =aNode.childNodes.length-1; i>=0; i–) {
aNode.removeChild(aNode.childNodes[i]);
}
//日付検索検索のためにiiも
for (var ii =aNode.childNodes.length-1; ii>=0; ii–) {
aNode.removeChild(aNode.childNodes[ii]);
}
var label = document.createElement(‘label’);
label.appendChild(document.createTextNode(‘’));
label.appendChild(search_word1);
label.appendChild(document.createTextNode(’ '));
label.appendChild(document.createTextNode('or ‘));
label.appendChild(search_word2);
label.appendChild(document.createTextNode(’ ‘));
label.appendChild(search_button);
label.appendChild(clear_button);
label.appendChild(document.createTextNode(’ '));
kintone.app.getHeaderMenuSpaceElement().appendChild(label);

return event;
});

})();

トピック		返信	表示
一覧画面での検索を複数及びユーザー、日付にする場合 kintone カスタマイズ	2	86	2021 年 7 月 20 日
日付の入力チェック kintone カスタマイズ	2	184	2019 年 11 月 13 日
リマインダーの繰り返し設定 kintone カスタマイズ	5	301	2019 年 8 月 26 日
フィールドに複数設置されている日付フィールド kintone カスタマイズ	2	69	2018 年 12 月 14 日
チェックボックスに連動した日付フォームの作成 kintone カスタマイズ	10	1005	2022 年 12 月 2 日

検索窓の検索キーワードを残したいです。

関連トピック