# レコード詳細画面に設置している検索窓について

**URL:** <https://community.cybozu.dev/t/topic/6010>\
**Category:** kintone 開発相談\
**Created:** [2022 年 5 月 24 日午前 1:04 UTC](https://community.cybozu.dev/t/topic/6010 "2022-05-24T01:04:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2935](https://avatars.discourse-cdn.com/v4/letter/l/6bbea6/32.png) [@Legacy\_Account2935](https://community.cybozu.dev/u/Legacy_Account2935)\
**Post date:** [2022 年 5 月 24 日午前 1:04 UTC](https://community.cybozu.dev/t/topic/6010/1 "2022-05-24T01:04:29Z")

</div>

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

レコード内に約２０個のテーブルがあり、いくつかのサイトや投稿を参考にレコード詳細画面に検索窓を設置したのですが編集画面を開いた後に保存すると検索窓が増えてしまいます。

増やさないようにしたいのですがご教示して頂けないでしょうか。

また、検索結果を優先的に上に表示させることは可能でしょうか？併せてご教示して頂けると幸いです。

&nbsp;

（使用したコード）

JQueryです。

```
(function() {
 "use strict";
 kintone.events.on('app.record.detail.show', function() {
 var searchBox = `<input id="searchBox" type="text">`;
 $("#record-gaia").prepend(searchBox);
 $("#record-gaia").on("keyup","#searchBox",function(){
 var keyword = $(this).val();
 $.each($("tbody tr"), function(i, val){
 //サブテーブルの検索したいカラムが何列目かによってeq()の数字を変更。(0始まり)
 if($(val).find("td:eq(1)").text().indexOf(keyword)!=-1){
 $(val).show();
 }else{
 $(val).hide();
 }
 });
 });
return event;
 });
})();

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 5 月 30 日午前 1:24 UTC](https://community.cybozu.dev/t/topic/6010/2 "2022-05-30T01:24:43Z")

</div>

nekokoさん

こんにちは。

&nbsp;

検索ボックスにidを振られていますので、そのidを持つ要素が既にあれば処理しないという形で増殖を防げます。

```
if (document.getElementById("searchBox")) {
return;
}

// jQueryを使うなら
if ($("#searchBox").length) {
return;
}

```

&nbsp;

あるいは、検索ボックスを毎回削除して、再度作り直すという方法もあります。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2935](https://avatars.discourse-cdn.com/v4/letter/l/6bbea6/32.png) [@Legacy\_Account2935](https://community.cybozu.dev/u/Legacy_Account2935)\
**Post date:** [2022 年 5 月 30 日午前 4:12 UTC](https://community.cybozu.dev/t/topic/6010/3 "2022-05-30T04:12:14Z")

</div>

[koichi様](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)

コードのご教示ありがとうございます。

IFを用いて対処することが出来るのですね。勉強になりました。

&nbsp;

コードの挿入位置は７行目と８行目の間でよろしいのでしょうか。

引き続きご教授して頂けますと幸いです。

&nbsp;

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 5 月 30 日午前 5:21 UTC](https://community.cybozu.dev/t/topic/6010/4 "2022-05-30T05:21:48Z")

</div>

```
var searchBox = `<input id="searchBox" type="text">`;

```

の前が良いです。

if判定して、要素があればreturnで終了。

無ければ、searchBoxを作成という流れになります。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2935](https://avatars.discourse-cdn.com/v4/letter/l/6bbea6/32.png) [@Legacy\_Account2935](https://community.cybozu.dev/u/Legacy_Account2935)\
**Post date:** [2022 年 5 月 30 日午前 5:39 UTC](https://community.cybozu.dev/t/topic/6010/5 "2022-05-30T05:39:17Z")

</div>

[koichi様](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)

コードの挿入箇所並びに解説有難うございます。

無事に検索ボックスの増殖を防ぐことができ、思っていた通りの動作をするようになりました。

&nbsp;

&nbsp;

&nbsp;

&nbsp;