お世話になります。
JavaScript初心者です。
レコード一覧画面に検索窓を設置し、検索できるようにしたいのですが思ったように動かず難儀しております。
検索窓は下記URLを参考に設置済みです。
http://crud-lab.hatenablog.com/entry/2016/03/17/9000
上記サイトでは「タイトル」フィールドを検索する仕様になっているため
const FIELD_CODE = ‘title’;
となっています。
この検索する範囲を「タイトル(title)」「質問(question)」「回答(answer)」の３つのフィールドに指定して検索したいのですが、その場合どのような指定をしたら良いでしょうか。
const FIELD_CODE = ‘title.question.answer’;
上記のように指定したら、クエリが不正となってしまい検索できませんでした。
どのように指定したらよいか、どなたかお力添え頂けないでしょうか。
宜しくお願い致します。
kiddy様
初めまして。
同様の質問がありますので、まずはこちらを参考にしてみてはいかがでしょうか。
一覧画面での複数検索窓の作成
erika様
コメントありがとうございます。
ご教示いただいた質問を参考にしてみたのですが、この内容ですと検索窓が複数存在してしまいます。
１つの検索窓で複数のフィールドを検索できるようにしたいのですが、どのように設定したらよいでしょうか。
本当に最近勉強し始めたばかりの初心者なもので…教えて頂けますと幸いです。
Kiddy様
それでしたらこちらはいかがでしょうか？
無料で公開しているプラグインです。
作るより早いと思います。
kintoneかんたん検索プラグインを作った話
どうしても自分で作成するのであれば、複数の項目をOR条件を使ってクエリで絞り込むようになりますので、
クエリを理解してないと難しいと思います。
修正する箇所としてはkiddy様が提示したサイトの「//キーワード検索の関数」の部分になるかと思います。
erika様
プラグインのご紹介ありがとうございます。
ただ、今回は自分の学習のため自作しようと思っています。
やはりクエリを理解していないと難しいのですね。
もしご迷惑でなければ、クエリを理解するのに役立つサイト等教えていただけないでしょうか。
業務の一環としてプログラムの学習が必要なため、お教え頂けますと幸いです。
kiddy様
KINTONEのクエリの書き方に関してはチュートリアルにありますので、
そちらをご覧頂ければと思います。
私もこの辺で勉強しました。
第4回クエリ指定して更新・並び順変更してみよう
レコードの一括取得(クエリで条件を指定)
URL内のクエリで、表示するレコードの条件を指定
私は「技術は目で盗め」と教わったので
プラグインに入っているのJSなどを覗いて該当箇所を特定してみたりしてます。
勉強中とのことで、すぐに答えを書かないほうがいいと思ったのですが、
意地悪だったかもと思い、以下にkiddy様が求めてると思われる答えを記載します。
//検索したいフィールドの設定値
//ふぃーるどフィールドコードは一対一
const FIELD_CODE = 'テスト１';
const FIELD_CODE2 = 'テスト２';
const FIELD_CODE3 = 'テスト３';
//andかorを小文字で入れる、今回はor
const 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);
//フィールドコード名と検索キーワードに分割する
for(var i = 0;i < query.length;i++){
var element = query[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, "");
}
//検索キーワード
var search_word = document.createElement('input');
search_word.type = 'text';
//検索ボタン
var search_button = document.createElement('input');
search_button.type = 'submit';
search_button.value = 'search';
search_button.onclick = function () {
keyword_search();
};
//キーワード検索の関数
function keyword_search(){
var keyword = search_word.value;
// var str_query = '?query='+ FIELD_CODE +' like "' + keyword;
//ここがクエリ
var str_query = '?query='+ FIELD_CODE +' like "' + keyword + '" ' + AND_OR +' '+ FIELD_CODE2 +' like "' + keyword + '"' + AND_OR +' '+ FIELD_CODE3 +' like "' + keyword + '"';
if(keyword == ""){
str_query = "";
}else if(keyword != ""){
// str_query = '?query='+ FIELD_CODE +' like "' + keyword + '"'; //コメントアウト
}
//検索結果の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(document.createTextNode(' '));
label.appendChild(search_word);
label.appendChild(document.createTextNode(' '));
label.appendChild(search_button);
kintone.app.getHeaderMenuSpaceElement().appendChild(label);
return event;
});
})();
erika様
お返事が遅くなり申し訳ありません
クエリのHP、お教えいただきありがとうございます。
読んで勉強します！
また、コードもありがとうございます。
望んでいた動作が得られました。
本当にありがとうございます。
技術は目で盗め、は本当におっしゃる通りで
頂いたコードを読み解いて理解できるように尽力します。
重ね重ねになりますが、お力添え本当にありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。