新規投稿
フォローする

過去のレコード値を用いてAutocomplete

文字列フィールドから入力する場合、同じ内容でも人によって記述がバラバラになって、後から整理しにくくなることがあります。 ドロップダウンやルックアップなどで記述を統一するのも手ですが、あらかじめ想定したリストからしか入力できなくなってしまいます。 これらを解消するために便利なのが、flexdatalistなどで実装できる、Autocomplete機能です。 アプリ内の過去のレコード値をもとに入力候補を出すことで、記述の統一が図れます。

サンプル

コード

jQueryflexdatalistkintone Utility Library for JavaScriptを利用しています。 JavaScriptファイルは、「jquery.min.js」、「jquery.flexdatalist.min.js」、「kintoneUtility.min.js」を順に読み込んだ後、下記「sample.js」を読み込みます。 CSSファイルは、「jquery.flexdatalist.min.js」を読み込みます。

・sample.js

(function(){
  "use strict";
  var autocompleteFields = [ //自動補完するフィールド
    {name:'会社名', code:'会社名'}, //フィールド名, フィールドコード
    {name:'訪問者名', code:'訪問者名'}, //フィールド名, フィールドコード
  ];
  var getFieldInput = function(fieldName){
    var input;
    $('.control-gaia').each(function(index, element){
      if($(element).find('.control-label-text-gaia').text() === fieldName){
        input = $(element).find('input');
      }
    });
    return input;
  };
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
  ], function(event){
    kintoneUtility.rest.getAllRecordsByQuery({
      app: kintone.app.getId()
    }).then(function(response){
      autocompleteFields.forEach(function(field){
        $(getFieldInput(field.name)).flexdatalist({
          minLength: 1,
          searchIn: 'value',
          data: response.records.map(function(record){
            return record[field.code].value;
          }).filter(function(value, index, values){
            return values.indexOf(value) === index;
          }).map(function(value){
            return {value: value};
          }),
        });
      });
    });
  });
})();

※DOMのclass名を利用しているため、kintoneの仕様変更により動作しなくなる可能性があります。 あらかじめご了承ください。

4

2件のコメント

Avatar
上海レンユアー 松村

すごい!これいいですね。

1
Avatar
rex0220

江田さん

ご紹介ありがとうございます。

試したところ、flexdatalist のライブラリに少し問題があり、そのままだと jQuery を使った他のプラグインや JavaScript と競合が発生します。

他で jQuery.noConflict(); されると、エラーになります。

Uncaught TypeError: Cannot read property 'extend' of undefined
at w.fn.init.jQuery.fn.flexdatalist

 

flexdatalist は、競合しないようにカスタマイズして下記で囲んであげる必要があります

(function($) {
...
})(jQuery);

 

Autocomplete機能は、かなり便利そうなので、プラグイン化してみました。

kintone 自動補完プラグイン

無償公開してますので、よろしければお試しください。

 

 

 

 

 

3
ログインしてコメントを残してください。