プログラミング初心者です。
下記の通り実現できなくて困っています。
ソースコードは皆さんやチュートリアルにある情報をいっぱい参照して、
自社用にカスタマイズをしてみました。
背景・実現したいこと
検索窓①(3つのフィールドを検索)と検索窓②(日付検索)を設置しており、
入力するときに色が変わるようにしておき(ここは後日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;
});
})();