add.pt

<div metal:use-macro="load: ../main.pt">
    <div metal:fill-slot="content">
        <div class="well">
            <div tal:content="structure form"/>
        </div>

    </div>
    <script type="text/javascript" metal:fill-slot="scripts">
        $(document).ready(function() {
            $('#departemen_nm').typeahead({
                "minLength": 1,
                "remote": "${request._host}/departemen/honk/act?term=%QUERY",
                "limit": 8
            });
            $('#departemen_nm').bind('typeahead:selected', function(obj, datum, name) {
                $('#departemen_id').val(datum.id);
            });

            $('#user_nm').typeahead({
                "minLength": 1,
                "remote": "${request._host}/user/hon/act?term=%QUERY",
                "limit": 8
            });
            $('#user_nm').bind('typeahead:selected', function(obj, datum, name) {
                $('#user_id').val(datum.id);
            });
        });
    </script>
</div>