smemo

技術メモです。

【Dynamics】オートコンプリートの実装

フィールドに値を入力する際のオートコンプリート(補完機能)の実装方法のメモ

以下MSDNを参考にしました。
https://msdn.microsoft.com/ja-jp/library/gg334266.aspx#BKMK_AutoCompletion


オートコンプリートのイメージ
業種コードに入力をすると候補を表示

f:id:smemo:20170102203809p:plain

全角入力時は入力後、スペースなどを入力すると候補が表示。。。(いまいちですね。。)
f:id:smemo:20170102204233p:plain


サンプルコードは以下

var OnKeyPressSample = (function () {

    return {
        Onload: function () {
            // List of sample account names to suggest
            sicCodes = [
              { name: 'G01', code: 'A01' },
              { name: 'G02', code: 'A02' },
              { name: 'G03', code: 'A03' },
              { name: 'G10', code: 'A04' },
              { name: 'G11', code: 'A05' },
              { name: 'G12', code: 'A06' },
              { name: '業種コード1', code: 'A07' },
            ];

            // キープレス時動作
            var keyPressFcn = function (ext) {
                try {
                    var userInput = Xrm.Page.getControl("sic").getValue();
                    resultSet = {
                        results: new Array(),
                        commands: {
                            id: "sp_commands",
                            label: "Learn More",
                            action: function () {
                                // "Learn More" link をクリックしたときのイベント
                                window.open("http://www.microsoft.com/en-us/dynamics/crm-customer-center/create-or-edit-an-account.aspx");
                            }
                        }
                    };

                    var userInputLowerCase = userInput.toLowerCase();

                    for (i = 0; i < sicCodes.length; i++) {
                        if (userInputLowerCase === sicCodes[i].name.substring(0, userInputLowerCase.length).toLowerCase()) {
                            resultSet.results.push({
                                id: i,
                                fields: [sicCodes[i].name]
                            });
                        }
                        if (resultSet.results.length >= 10) break;
                    }

                    if (resultSet.results.length > 0) {
                        ext.getEventSource().showAutoComplete(resultSet);
                    } else {
                        ext.getEventSource().hideAutoComplete();
                    }
                } catch (e) {
                    console.log(e);
                }
            };

            // 業種コードキープレスイベントに動作割り当て
            Xrm.Page.getControl("sic").addOnKeyPress(keyPressFcn);
        }
    };
})();

この機能を使って、ユーザーの入力を補助することが可能になりそうです。
(定型文入力+フリー入力などで使えそうでしょうか?)