Alasqlを使用して、レコード一覧画面に設置した検索ボックスに入力された文字であいまい検索をしたい

初めての投稿です。JavaScriptを含むプログラミング初心者で、思いつく限り調べてみたのですがうまくいきません。ご助力くださると幸いです。

一覧画面に検索ボックスを設置して、検索ボックスに入力した文字をもとに一覧レコード全体のあいまい検索を行いたいです。

その検索はAlasqlを使用したいのですが、そもそも一覧画面を表示した際にalertで下記エラーが出ます。Alasqlで[住所]を取得できていないからかと思ったのですが、そもそもフォームで[住所]というフィールドに表示するデータは、[都道府県] + [市町村] + [丁目]となっているため、そのような設定をしないといけないということでしょうか?

DataTables warning: table id=myTable - Requested unknown parameter '住所' for row 0, column 2. For more information about this error, please see[http://datatables.net/tn/4](http://datatables.net/tn/4)

検索ボックスに文字を入力して検索ボタンを押すと、ブラウザの開発者ツールのコンソールに以下のエラーが出ます。

こちらはなぜそのエラーが出るかわからず、またどのように調べればいいかが模索できておりません。

Uncaught TypeError: t is not a function
    at w.Query.cb (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:10:18371)
    at c (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:11064)
    at u (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:7522)
    at Object.eval [as datafn] (eval at <anonymous> (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:10:21665), <anonymous>:3:57)
    at download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:7053
    at Array.forEach (<anonymous>)
    at o (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:2:7013)
    at a (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:10:18215)
    at w.dexec (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:9:26377)
    at w.exec (download.do?app=13&contentId=708&jsType=DESKTOP&hash=95ce344f88ddb4b34a54d796d761ec885f28c2b1:9:25814)

ソースは以下となります。

(function() {

  "use strict";

  kintone.events.on(['app.record.index.show'], function(event){

    if(event.viewName !== '住所管理') return;




    // Initialize kintone-rest-api-client

    const client = new KintoneRestAPIClient();




    var myTable;




    var appId = kintone.app.getId();

    console.log(appId);

    // APIでデータ取得

    client.record.getAllRecordsWithCursor({

      app: appId,

    }).then(function(response){

 console.log(response);

      // kintoneのrecords(json)を、alasqlで扱える配列に変換

      function convertToRows(records) {

        var rows = records.map(function(record){

          var keys = Object.keys(record);

          var row = {};

          keys.map(function(key){

            switch (key) {

                row[key] = record[key].type === 'NUMBER' ? Number(record[key].value) : record[key].value;

            }

          });

          return row;

        });

        return rows;

      }

      var recordSet = convertToRows(response);

      //検索ワードを格納

      var searchWord = document.createElement('input');

      searchWord.type = 'text';

      //検索ボタンの設定

      var searchButton = document.createElement('input');

      searchButton.type = 'submit';

      searchButton.value = '検索';

      var sqlResult = alasql(

        "SELECT [物件名], [物件コード], [住所] FROM ? GROUP BY [物件名], [物件コード]",

      [recordSet]

    );

    console.log(sqlResult)

      searchButton.onclick = function(){

        sqlResult = keyWordSearch();

      };




      function keyWordSearch(){

        var sql = ""

        if(searchWord = ""){

          sql = alasql(

            "SELECT [物件名], [物件コード], [[住所] FROM ? GROUP BY [物件名], [物件コード]",

          [recordSet]

        );

        console.log(sql);

        }else{

          // select by alasql

          sql = alasql(

            "SELECT [物件名], [物件コード], [住所] FROM ? WHERE [物件名] LIKE '% ? %' GROUP BY [物件名], [物件コード]",

          [recordSet],[searchWord]

          );

          console.log(sql);

        }

        return sql;

    }




      // 表に表示するカラム(alasqlの出力結果の項目名)

      var columns = [

        '物件コード',

        '物件名',

        '住所'

      ];




      // DataTables初期化

      myTable = $('#myTable').DataTable({

        destroy: true,

        pageLength: 100,

        lengthChange: false,

        searching: false,

        info: false,

        data: sqlResult.map(function(record){

          return columns.reduce(function(data, column){

            data[column] = record[column];

            return data;

          }, {

            レコード番号: record['レコード番号']

          });

        }),

        columns: columns.map(function(column){

          return {

            title: column,

            data: column

          }

        })

      });

      //要素をクリア

    var space = kintone.app.getHeaderMenuSpaceElement()

    for(var i = space.childNodes.length - 1; i >= 0; i++){

      space.removeChild(space.childNodes[i]);

    }

      var label = document.createElement('label');

      label.appendChild(document.createTextNode('レコード内検索'));

      label.appendChild(document.createTextNode('  '));  

      label.appendChild(searchWord);

      label.appendChild(document.createTextNode('  '));    

      label.appendChild(searchButton);    

      kintone.app.getHeaderMenuSpaceElement().appendChild(label);

    });

  });

})();

参考として、下記URLを参照して、うまく組み合わせられないかと考えて書きました。

https://qiita.com/rex0220/items/4d0c757344e8ac144f8d 

https://dsp74118.blogspot.com/2020/05/kintonesql.html 

https://qiita.com/sy250f/items/b17f6cbbeb2b862c48a9 

https://crud-lab.hatenablog.com/entry/2016/03/17/9000#f-8c1c6c1f 

プラグインを使用せず、プログラミングの勉強を兼ねて自分でJavaScriptを作成したいと思っております。

またAlasqlの可能性を探るため、なんとかAlasqlを使用したいと考えております。

大変お手数をおかけするのですが、どうかご指導いただけますと幸いです。

いろいろおかしなところがありますので、開発ツールでステップ実行しながら、ステップ実行前と実行後で変数の内容を見て期待通りに動いているかデバッグしてみてください。

・>その検索はAlasqlを使用したいのですが、そもそも一覧画面を表示した際にalertで下記エラーが出ます。

一覧画面を表示した時点では、Alasql を実行していなく、エラーが「DataTables warning:」なので DataTables 実行時のエラーだと思われます。

・if(searchWord = “”){

比較(==)ではなく、代入になっている

searchWord は、「 var searchWord = document.createElement(‘input’);」なので、入力されたテキストを取得するには、searchWord.value

・そもそもグリッド表示のフィルターであれば、Alasql を使うのではなく、グリッドライブラリのフィルター機能をつかったほうがよいのでは?

 

コメントありがとうございます。ステップ実行を知らなかったので、大変参考になりました。

おっしゃる通り、期待通りに動いていないです。

そもそもグリッド表示のフィルターであれば、Alasql を使うのではなく、グリッドライブラリのフィルター機能をつかったほうがよいのでは?

こちらの件ですが、「グリッドライブラリのフィルター機能」というものが検索しても分からず、調べ方などをご教示いただきたいです。
Alasqlを使用する意図としては、今後集計などの機能を実装していく中で、使用方法を把握していればスムーズに作成できるのではないかと考えた次第でございます。

リンク先を参考にしようとすると、Alasqlを使用するには一覧をカスタマイズで作成し、グリッド表示する方法しかないのかと思っているのですが、「一覧1」などのカスタマイズしていない一覧画面でもAlasqlは実装可能なのでしょうか?

>こちらの件ですが、「グリッドライブラリのフィルター機能」というものが検索しても分からず、調べ方などをご教示いただきたいです。

とりあえず、使用するグリッドライブラリ(Datatable)の公式サイトをみましょう。
http://holt59.github.io/datatable/#option-countertext

ページにフィルター機能のデモが載っています。フィルターオプションの説明もあります。

他に、「DataTables フィルター」あたりで検索すれば日本語のページもありそうです。
またDatatableにこだわる必要はないのであれば、他のグリッドライブラリも検討してみてください。

>リンク先を参考にしようとすると、Alasqlを使用するには一覧をカスタマイズで作成し、グリッド表示する方法しかないのかと思っているのですが、「一覧1」などのカスタマイズしていない一覧画面でもAlasqlは実装可能なのでしょうか?

kintone 推奨は、カスタマイズ一覧で実装ですね。

表形式一覧でグリッド表示もできますが、kintone 仕様変更で動作しなくなるリスクがあります。

ありがとうございます。プラグインのことだったのですね。

公式サイト、「DataTables フィルター」での検索どちらも確認し、理解できました。たしかにAlasqlを使用しなくてもこのプラグインのフィルター機能でもっと楽に絞り込めそうです。ありがとうございます。

またDatatableにこだわる必要はないのであれば、他のグリッドライブラリも検討してみてください。

Datatable形式が正とされているので他のことは考えたことがなかったのですが、他のグリッドライブラリも色々調べてみて検討します。アドバイス助かります。ありがとうございます。

kintone 推奨は、カスタマイズ一覧で実装ですね。

表形式一覧でグリッド表示もできますが、kintone 仕様変更で動作しなくなるリスクがあります。

やはりそうなのですね。ありがとうございます。

こちらも承知いたしました。それでは、検索はいったんあきらめて、集計などで使用しようと思います。本当にありがとうございます。

rex0220さんのQiita記事がとても勉強になります。ほかの記事も参照して、今後の勉強もさせていただきます。ありがとうございました。

また機会がございましたら、ご助力をお願いできますと幸いです。