# 2つのフィールドを検索窓1つで検索したい

**URL:** <https://community.cybozu.dev/t/topic/4379>\
**Category:** kintone 開発相談\
**Created:** [2019 年 9 月 11 日午前 6:27 UTC](https://community.cybozu.dev/t/topic/4379 "2019-09-11T06:27:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1221](https://avatars.discourse-cdn.com/v4/letter/l/7993a0/32.png) [@Legacy\_Account1221](https://community.cybozu.dev/u/Legacy_Account1221)\
**Post date:** [2019 年 9 月 11 日午前 6:27 UTC](https://community.cybozu.dev/t/topic/4379/1 "2019-09-11T06:27:47Z")

</div>

いつもお世話になっております。

一覧画面に検索窓を作り、会社名(フィールドコード:company)で検索できるようにしたのですが、カナ(フィールドコード:kana)で入力した場合でも検索するようにすることはできるでしょうか？

調べていると、検索窓が2つで作成することはできましたが、1つのまま実装できればと思っております。

また、テキストボックスとボタンにスタイルシートを適用したいのですが、どこにクラス名を記入したらいいかわからないので教えていただけると幸いです。(51-modern-default.cssは同梱できています)

どうぞよろしくお願い致します。

&nbsp;

&nbsp;

const FIELD\_CODE = ‘company’;

//レコード一覧表示のイベントハンドラー  
(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\_button.onclick = function () {  
keyword\_search();  
};

//フォーカス  
search\_button.addEventListener(‘focusin’, (event) =\> {  
event.target.style.background = ‘#e0ffff’;  
});

search\_button.addEventListener(‘focusout’, (event) =\> {  
event.target.style.background = ‘’;  
});

//キーワード検索の関数  
function keyword\_search(){  
var keyword = search\_word.value;  
var str\_query = ‘?query=’+ FIELD\_CODE +’ 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;  
});  
})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1221](https://avatars.discourse-cdn.com/v4/letter/l/7993a0/32.png) [@Legacy\_Account1221](https://community.cybozu.dev/u/Legacy_Account1221)\
**Post date:** [2019 年 9 月 12 日午前 1:18 UTC](https://community.cybozu.dev/t/topic/4379/2 "2019-09-12T01:18:39Z")

</div>

スタイルシートにつきましては解決いたしました。

表題のコメントお待ちしております。

どうぞよろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2017](https://avatars.discourse-cdn.com/v4/letter/l/f19dbf/32.png) [@Legacy\_Account2017](https://community.cybozu.dev/u/Legacy_Account2017)\
**Post date:** [2019 年 9 月 12 日午前 8:57 UTC](https://community.cybozu.dev/t/topic/4379/3 "2019-09-12T08:57:09Z")

</div>

```
str_query = '?query='+ FIELD_CODE +' like "' + keyword + '"';

```

の箇所を、

```
str_query = '?query='+ FIELD_CODE +' like "' + keyword + '" or kana like "' + keyword + '"';

```

とするとどうでしょうか

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1221](https://avatars.discourse-cdn.com/v4/letter/l/7993a0/32.png) [@Legacy\_Account1221](https://community.cybozu.dev/u/Legacy_Account1221)\
**Post date:** [2019 年 9 月 12 日午後 11:24 UTC](https://community.cybozu.dev/t/topic/4379/4 "2019-09-12T23:24:30Z")

</div>

PV様

&nbsp;

お世話になっております。

教えていただいた通りにコードを変更してみたら実装できました！！

心より感謝申し上げます。

今後ともどうぞよろしくお願いいたします。