検索をかけてからドロップダウンの選択肢が消えた

初めまして、こんにちは。
一覧画面でドロップダウンと検索ボタンを設置しまして、英語単語ABC三つの選択肢があり、検索かけたあと、該当する絞り条件の結果が出るように作りました。

ですが、動作上で基本的に実現できるのですが、検索をかけたあと、ドロップダウンの選択肢が消えてしまい(画像2.3のように)、どちらを選択されたかわからなくなってしまうので、どうやって直せばいいでしょうか。。

 

ソースは下記のとおりです

(function () {

  “use strict”;

    kintone.events.on(‘app.record.index.show’, function (event) {

                

      if (document.getElementById(‘company’) !== null) {

        return;

    }

  

      var eigo = new Kuc.Dropdown(

        

        {items:[

        { label:‘A’,value:‘A’},

        { label:‘B’,value:‘B’},

        { label:‘C’,value:‘C+’},

       ],

       visible: true,

       disabled: false,

       id:‘status’

      

   });

   if(sessionStorage.getItem(“status”)){

    $(‘#status’).val(sessionStorage.getItem(“status”));

    sessionStorage.removeItem(“status”);

  }

   var viewid = event.viewId;

   var search_button = new Kuc.Button({

    text: ‘検索’,

    type: ‘submit’,

    id:‘search’

});

  

    search_button.addEventListener(‘click’,event=> {

      

     const keyword = eigo.value;   

      var str_query = encodeURIComponent(‘英語単語 in("’+keyword+‘")’);

      

      if(keyword == “”){

        str_query = “”;

      }else if(keyword != “” ){

         str_query = ‘?view=’+ viewid + ‘&’ + ‘query=’+ str_query;

         sessionStorage.setItem(‘status’, keyword);

      }

       document.location = location.origin + location.pathname + str_query

  

    });

    const header = kintone.app.getHeaderMenuSpaceElement();

    header.appendChild(eigo);

    header.appendChild(search_button);     

   

    return event;

  });

})();

 

 

 

 

 

 

 

artisbeさん

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

ドロップダウンの選択が外れる理由は、document.locationを書き換えたことによりページ遷移したことだと思います。

ページ遷移して、ドロップダウンは再び何も操作されていない状態に戻るので、検索結果をもとに値をセットする必要があるかと思います。

kintone.app.getQueryCondition()でレコード一覧のクエリ文字列を取得できるので、ここからドロップダウンで選択した値を抽出するとよいかと思います。

値のセットは、抽出した値をeigo.valueに代入することでできるかと思います。

eigo.value = hoge;

>>江田篤史様
ご回答ありがとうございます。
こちらまた初めて2週間のため、不明なところがいろいろありまして、

var str_query = encodeURIComponent(‘英語単語 in("’+keyword+‘")’);

var str_query = kintone.app.getQueryCondition(‘英語単語 in ("’+keyword+‘")’) ;

へ変更することでしょうか?

 

よろしくお願いいたします

artisbeさん

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

いえ、artisbeさんがご提示したコードを修正するというよりは、処理を追加することになります。

現状ですと、どのような場合でも、一覧ページに遷移した際にドロップダウンの初期値がセットされることはないかと思います。
検索ボタンを押した後の画面、つまりクエリ文字列がセットされている場合は、クエリ文字列をもとにドロップダウンの初期値をセットすると良いと思います。

セットされたクエリ文字列の取得に、kintone.app.getQueryCondition()が利用できるというお話でした。

>>江田篤史様

ご丁寧に回答いただきありがとうございます。
ある程度理解できてましたが、kintone.app.getQueryCondition()の使い方が良く分かりませんので、
先ほどkintone自体の絞り条件をかけてみまして、例え選択条件Bの場合、urlは[ …/?view=2247&q=f2235 in (“B”)#sort_0=f2227&order_0=desc&size=20 ]に代わりましたので、その時、kintone.app.getQueryCondition()取得された文字列は先のurlということでしょうか?

度々申し訳ございません。解決しました。

 $(‘#status’).val(sessionStorage.getItem(“status”));

 

 

  eigo.value = sessionStorage.getItem(“status”);

 

に変更しましたら解決しました。

いろいろアドバイスいただきありがとうございました。