Пример использования AS.SERVICES.showDropDown¶

Исходный код функции

$("[data-asformid='textbox.input.textbox-cmp']").click(function () {
    var values = [{
        value: "Queen",
        title: "ROCK"
    }, {
        value: "Oxxxymiron",
        title: "RAP"
    }, {
        value: "Филипп Киркоров",
        title: "POP"
    }];

    values.forEach(function (item) {
        if (item.value === model.getValue()) {
            item['selected'] = true;
        }
    });

    AS.SERVICES.showDropDown(values,
            $("[data-asformid='textbox.input.textbox-cmp']"),
            200,
            function (value) {
                model.setValue(value);
            });
    });
}

Полный исходный код

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DropDown Widget</title>

    <script>
        FORM_PLAYER_URL_PREFIX = "http://demoextfp.synergy.tm/Synergy/";
        <!--служебная переменная для корректной работы компонента "HTD-редактор"-->
    </script>
    <link rel="stylesheet"
          href="http://demoextfp.synergy.tm/Synergy/js/form.player.css"/>
    <!--стандартный стиль компонентов формы-->
    <script src="http://demoextfp.synergy.tm/Synergy/js/vendor.js"
            type="text/javascript"></script>
    <!--ссылка на сторонние библиотеки-->
    <script src="http://demoextfp.synergy.tm/Synergy/js/form.player.js"
            type="text/javascript"></script>
    <!--ссылка на проигрыватель форм-->
</head>
<body>
<div id="form_player_container">
    <div id="form_player_div"></div>
</div>

<script>
    'use strict';

    AS.OPTIONS.locale = "ru";
    AS.OPTIONS.coreUrl = "http://demoextfp.synergy.tm/Synergy/";


    var portal = {
        player: null,

        /**
         * очистить текущий проигрыватель форм
         */
        clearPlayer: function () {
            if (portal.player) {
                portal.player.destroy();
            }
        },
        /**
         * добавить новый проигрыватель форм
         */
        createPlayer: function (formCode) {
            portal.clearPlayer();
            portal.player = AS.FORMS.createPlayer();
            portal.player.showFormByCode(formCode);
            portal.player.view.setEditable(true);
            portal.player.view.appendTo($('#form_player_div'));

            AS.FORMS.bus.on(AS.FORMS.EVENT_TYPE.formShow, function (event, model, view) {
                if (model.formCode === formCode) {
                    model.on(AS.FORMS.EVENT_TYPE.dataLoad, function () {
                        portal.main(portal.player.view.getViewWithId("textbox-cmp"), portal.player.model.getModelWithId("textbox-cmp"));
                    });
                }
            });
        },

        main: function (view, model) {
            $("[data-asformid='textbox.input.textbox-cmp']").click(function () {
                var values = [{
                    value: "Queen",
                    title: "ROCK"
                }, {
                    value: "Oxxxymiron",
                    title: "RAP"
                }, {
                    value: "Филипп Киркоров",
                    title: "POP"
                }];

                values.forEach(function (item) {
                    if (item.value === model.getValue()) {
                        item['selected'] = true;
                    }
                });

                AS.SERVICES.showDropDown(values,
                        $("[data-asformid='textbox.input.textbox-cmp']"),
                        200,
                        function (value) {
                            model.setValue(value);
                        });
            });
        }
    };

    $(document).ready(function () {
        AS.OPTIONS.login = "1";
        AS.OPTIONS.password = "1";
        portal.createPlayer("sd-doc-widget-examples");
    });
</script>

</body>
</html>