2つの検索キーワードについて

現在、勉強中の初心者です。
処理したい事を調べて、自分のやりたい項目に編集しながら勉強しています。

一覧表示画面から、2つの検索キーワードを入力し、ANDで検索結果を表示したいのですが(お問合せ内容としてもっているフィールドは1つ)、検索結果はANDできちんと抽出できるのですが、表示された後の検索キーワード欄が

お問合せ内容1:あああ
お問合せ内容2:空欄

検索し、一覧表示されると
お問合せ内容1:あああ
お問合せ内容2:あああ

また、
お問合せ内容1:あああ
お問合せ内容2:いいい

検索し、一覧表示されると
お問合せ内容1:いいい
お問合せ内容2:いいい

と検索キーワードに表示されます。

(検索結果は”otoiawasenaiyou”フィールドに「あああ」「いいい」と入力してあるが抽出され、問題ないです。)

検索時に入力したキーワードをそのまま表示させる事は可能でしょうか?

何卒、ご教授お願い致します。


/*
※kintoneでの検索の注意点!!
1, 1文字では検索出来ない(最低でも2文字以上)
2, 英数字検索が単語単位(cyで、cybozeがヒットしない!)
https://help.cybozu.com/ja/k/user/search_details.html
*/

// 設定値
const FIELD_CODE1 = “otoiawasenaiyou”;
const FIELD_CODE1_NAME = “お問合せ内容1”;
const AND_OR = “and”;  // 必ず小文字
const FIELD_CODE2 = “otoiawasenaiyou”;
const FIELD_CODE2_NAME = “お問合せ内容2”;

// 一覧表示のタイミングで実行
(function () {
  “use strict”;
  kintone.events.on(“app.record.index.show”, function (event) {
    // 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] );
        
        // スペースと""をtrimして、文字列だけにしてから、配列に格納
        result[paramName.replace(/^\s+|\s+$/g, “”)] = paramValue.replace(/^[\s|"]+|[\s|"]+$/g, “”);
    }    

    // 検索キーワードその1
    var search_word1 = document.createElement(‘input’);
    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引数に、直前の検索キーワードがあったら格納しておく
    }
    
    // 検索キーワードその2
    var search_word2 = document.createElement(‘input’);
    search_word2.onkeypress = function(e) {
        if (e.keyCode && e.keyCode == 13) {
           keyword_search();
        }
    }
    if(result[FIELD_CODE2] !== undefined){
        search_word2.value  = result[FIELD_CODE2];   // GET引数に、直前の検索キーワードがあったら格納しておく
    }
    
    // 検索ボタン
    var search_button = document.createElement(‘button’);
    search_button.innerHTML = ‘search’;
    search_button.onclick = function () {
        keyword_search();
    };
    
    // キーワード検索の関数
    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 “’ + keyword2 + '”‘;
      
      if(keyword1 === “” && keyword2 === “”){
        str_query = “”;
      }else if(keyword1 !== “” && keyword2 === “”){
        str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '”’
      }else if(keyword1 === “” && keyword2 !== “”){
        str_query = ‘?query=’+ FIELD_CODE2 +’ like “’ + keyword2 + '”’
      }
      
      // 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]);
    }
    var label = document.createElement(‘label’);
    label.appendChild(document.createTextNode(FIELD_CODE1_NAME));
    label.appendChild(search_word1);
    label.appendChild(document.createTextNode(’ ‘+ AND_OR +’ ‘));
    label.appendChild(document.createTextNode(FIELD_CODE2_NAME));
    label.appendChild(search_word2);    
    label.appendChild(document.createTextNode(’  '));    
    label.appendChild(search_button);     
    kintone.app.getHeaderMenuSpaceElement().appendChild(label);

    return event;
  });

})();

Rie さん

FIELD_CODE1 と FIELD_CODE2 が 同じ “otoiawasenaiyou” ですので、

result には、result[“otoiawasenaiyou”] しかセットされません。

結果、result[FIELD_CODE1] と result[FIELD_CODE2] は、同じものを参照します。

対応案

パラメータ指定位置を考慮したロジックに変更します。

・paramName.replace(/^\s+|\s+$/g, “”) が “otoiawasenaiyou” の場合、

配列にした result に、 paramValue.replace(/^[\s|"]+|[\s|"]+$/g, “”); を追加

・result[FIELD_CODE1] の代わりに、 1番目の配列要素を参照

・result[FIELD_CODE2] の代わりに、 2番目の配列要素を参照

rex0220様
ご返信ありがとうございます。

paramName.replace(/^\s+|\s+$/g, “”) が “otoiawasenaiyou” の場合、
配列にした result に、 paramValue.replace(/^[\s|"]+|[\s|"]+$/g, “”); を追加

・result[FIELD_CODE1] の代わりに、 1番目の配列要素を参照
・result[FIELD_CODE2] の代わりに、 2番目の配列要素を参照

を記載してみましたが、(//*** ↓2017-11-14 追記 部分を追加)
結果は、データ抽出は問題なく出来るのですが、お問合せ内容1、2が空欄になってしまいます。
JSEdit for kintoneでもエラーがでず、CTRL+SHIFT+iでも特にエラーが表示されていません。
お手数をおかけ致しますがご教授お願い致します。


/*
※kintoneでの検索の注意点!!
1, 1文字では検索出来ない(最低でも2文字以上)
2, 英数字検索が単語単位(cyで、cybozeがヒットしない!)
https://help.cybozu.com/ja/k/user/search_details.html
*/

// 設定値
const FIELD_CODE1 = “otoiawasenaiyou”;
const FIELD_CODE1_NAME = “お問合せ内容1”;
const AND_OR = “and”;  // 必ず小文字
const FIELD_CODE2 = “otoiawasenaiyou”;
const FIELD_CODE2_NAME = “お問合せ内容2”;

// 一覧表示のタイミングで実行
(function () {
  “use strict”;
  kintone.events.on(“app.record.index.show”, function (event) {
    // 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] );
        
        // スペースと""をtrimして、文字列だけにしてから、配列に格納
        result[paramName.replace(/^\s+|\s+$/g, “”)] = paramValue.replace(/^[\s|"]+|[\s|"]+$/g, “”);
    }    

    // 検索キーワードその1
    var search_word1 = document.createElement(‘input’);
    search_word1.onkeypress = function(e) {
        if (e.keyCode && e.keyCode == 13) {
           keyword_search();
        }
    }

//*** ↓2017-11-14 追記
    if(result[paramName.replace(/^\s+|\s+$/g, “”)] = “otoiawasenaiyou”){
        // スペースと""をtrimして、文字列だけにしてから、配列に格納
        result[paramName.replace(/^\s+|\s+$/g, “”)]= paramValue.replace(/^[\s|"]+|[\s|"]+$/g, “”);
}

    if(result[1] !== undefined){
//*** ↓2017-11-14 追記
    //  search_word1.value  = result[FIELD_CODE1];   // GET引数に、直前の検索キーワードがあったら格納しておく
        search_word1.value  = result[1];   
}
    
    // 検索キーワードその2
    var search_word2 = document.createElement(‘input’);
    search_word2.onkeypress = function(e) {
        if (e.keyCode && e.keyCode == 13) {
           keyword_search();
        }
    }

    if(result[2] !== undefined){
//*** ↓2017-11-14 追記
    //  search_word2.value  = result[FIELD_CODE2];   // GET引数に、直前の検索キーワードがあったら格納しておく
        search_word2.value  = result[2];
}
    

    // 検索ボタン
    var search_button = document.createElement(‘button’);
    search_button.innerHTML = ‘search’;
    search_button.onclick = function () {
        keyword_search();
    };
    
    // キーワード検索の関数
    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 “’ + keyword2 + '”‘;
      
      if(keyword1 === “” && keyword2 === “”){
        str_query = “”;
      }else if(keyword1 !== “” && keyword2 === “”){
        str_query = ‘?query=’+ FIELD_CODE1 +’ like “’ + keyword1 + '”’
      }else if(keyword1 === “” && keyword2 !== “”){
        str_query = ‘?query=’+ FIELD_CODE2 +’ like “’ + keyword2 + '”’
      }
      
      // 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]);
    }
    var label = document.createElement(‘label’);
    label.appendChild(document.createTextNode(FIELD_CODE1_NAME));
    label.appendChild(search_word1);
    label.appendChild(document.createTextNode(’ ‘+ AND_OR +’ ‘));
    label.appendChild(document.createTextNode(FIELD_CODE2_NAME));
    label.appendChild(search_word2);    
    label.appendChild(document.createTextNode(’  '));    
    label.appendChild(search_button);     
    kintone.app.getHeaderMenuSpaceElement().appendChild(label);

    return event;
  });

})();

配列の設定と取得の部分を切り貼りしてみました。

配列の添え字は 0 からです。

内容は検証してください。

 

/*
※kintoneでの検索の注意点!!
1, 1文字では検索出来ない(最低でも2文字以上)
2, 英数字検索が単語単位(cyで、cybozeがヒットしない!)
https://help.cybozu.com/ja/k/user/search_details.html
*/

// 設定値
const FIELD_CODE1 = "otoiawasenaiyou";
const FIELD_CODE1_NAME = "お問合せ内容1";
const AND_OR = "and"; // 必ず小文字
const FIELD_CODE2 = "otoiawasenaiyou";
const FIELD_CODE2_NAME = "お問合せ内容2";

// 一覧表示のタイミングで実行
(function () {
"use strict";
kintone.events.on("app.record.index.show", function (event) {
// GET引数に格納された直前の検索キーワードを取得して再表示する
// var result = {};
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] );

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

// 検索キーワードその1
var search_word1 = document.createElement('input');
search_word1.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}


//   //*** ↓2017-11-14 追記
// if(result[paramName.replace(/^\s+|\s+$/g, "")] = "otoiawasenaiyou"){
// // スペースと""をtrimして、文字列だけにしてから、配列に格納
// result[paramName.replace(/^\s+|\s+$/g, "")]= paramValue.replace(/^[\s|\"]+|[\s|\"]+$/g, "");
//   }
  

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

if (result.length > 0) {
search_word1.value = result[0];
}

// 検索キーワードその2
var search_word2 = document.createElement('input');
search_word2.onkeypress = function(e) {
if (e.keyCode && e.keyCode == 13) {
keyword_search();
}
}

// if(result[2] !== undefined){
//   //*** ↓2017-11-14 追記
// // search_word2.value = result[FIELD_CODE2]; // GET引数に、直前の検索キーワードがあったら格納しておく
// search_word2.value = result[2];
//   }

if (result.length > 1) {
search_word2.value = result[1];
}

// 検索ボタン
var search_button = document.createElement('button');
search_button.innerHTML = 'search';
search_button.onclick = function () {
keyword_search();
};

// キーワード検索の関数
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 "' + keyword2 + '"';

if(keyword1 === "" && keyword2 === ""){
str_query = "";
}else if(keyword1 !== "" && keyword2 === ""){
str_query = '?query='+ FIELD_CODE1 +' like "' + keyword1 + '"'
}else if(keyword1 === "" && keyword2 !== ""){
str_query = '?query='+ FIELD_CODE2 +' like "' + keyword2 + '"'
}

// 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]);
}
var label = document.createElement('label');
label.appendChild(document.createTextNode(FIELD_CODE1_NAME));
label.appendChild(search_word1);
label.appendChild(document.createTextNode(' '+ AND_OR +' '));
label.appendChild(document.createTextNode(FIELD_CODE2_NAME));
label.appendChild(search_word2);
label.appendChild(document.createTextNode(' '));
label.appendChild(search_button);
kintone.app.getHeaderMenuSpaceElement().appendChild(label);

return event;
});

})();

rex0220様
ご返信ありがとうございます。

result.pushについて勉強させていただきました。
再度、一から見直し勉強していきたいと思います。

求めていた処理操作もでき、ご親切にコードを教えて下さり本当にありがとうございました。
今後とも何卒、宜しくお願い致します。