usersAutocomplete2.ftl

<#include "/org/alfresco/components/form/controls/common/utils.inc.ftl" />

<#-- set global freemarker properties -->

<#assign fieldValue=field.value>

<#assign el=args.htmlid?html>

<#-- CSS style definition -->

<style media="screen" type="text/css">

    .autocomplete-container {
        height: 3em;
    }

    .autocomplete-container input{
        outline: none;
    }

    .autocomplete-container ul li{
        padding: 0!important;
    }

    .autocomplete-container ul li div.autocomplete-item{
        padding: 3px 3px 3px 6px;
    }

    .autocomplete-container ul li:not(:first-child) div.autocomplete-item{
        border-top: solid 1px #ccc;
    }

</style>

<#-- javascript functions definition -->

<script type="text/javascript">//<![CDATA[
(function() {

    // After html input element is generated
    YAHOO.util.Event.onAvailable("${fieldHtmlId}", function() {

        // Parse and update date input value function
        var setDate = function(date, id) {

            var d = new Date(date);
            var input = Dom.get(id);
            if (!isNaN(d)) {
                input.value = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();

            } else {
                input.value = "";
            }
            YAHOO.util.UserAction.keyup(input);
        };


        <#if field.control.params.webscript?? && field.control.params.webscript?string != "">
            var dataSource = new YAHOO.util.XHRDataSource(Alfresco.constants.PROXY_URI + "${field.control.params.webscript}" + "?site=" + Alfresco.constants.SITE);
        <#else>
            var dataSource = new YAHOO.util.LocalDataSource();
        </#if>
        // Create and configure new datasource


        dataSource.responseSchema = {
            resultsList: "results", // String pointer to result data
            fields: [
                "cm_userName",
                "cm_firstName",
                "cm_lastName",
            ]
        };

        // Create and configure new autocomplete
        var autocomplete = new YAHOO.widget.AutoComplete("${fieldHtmlId}", "${fieldHtmlId}-autocomplete-options", dataSource);

        autocomplete.generateRequest = function(sQuery) {
            return "&query=" + sQuery;
        };

     // Create formatted options from filterred results
        autocomplete.formatResult = function(oResultItem, sQuery) {

            // If some of values are empty, show message that there were not filled in datalist
            var item = '<div class="autocomplete-item">';
            item += '<div><b>${msg("users-autocomplete.prop_cm_userName")}:</b> ' + oResultItem[0] + '</div>';
            item += '<div><b>${msg("users-autocomplete.prop_cm_firstName")}:</b> ' + oResultItem[1] + '</div>';
            item += '<div><b>${msg("users-autocomplete.prop_cm_lastName")}:</b> ' + oResultItem[2] + '</div>';
            item += '</div>';

            return item;
        };

        // Listen to event of item selection
        autocomplete.itemSelectEvent.subscribe(function(sType, aArgs) {
            Dom.get("${el}_prop_swm2_specialSchvalovatele").value = aArgs[2][0];
        });

        // Container will expand and collapse vertically
        autocomplete.animVert = false;

        // Container will expand and collapse horizontally
        autocomplete.animHoriz = false;

        // Container animation will take 0 seconds to complete
        autocomplete.animSpeed = 0;

        // Remove autohighlight after options are showed
        autocomplete.autoHighlight = false

        // Container shows max 5 results
        autocomplete.maxResultsDisplayed = 10;

    });
})();

//]]> </script>

<div class="form-field">
   <#if form.mode == "view">
      <div class="viewmode-field">
         <#if field.mandatory && !(field.value?is_number) && field.value == "">
            <span class="incomplete-warning"><img src="${url.context}/res/components/form/images/warning-16.png" title="${msg("form.field.incomplete")}" /><span>
         </#if>
         <span class="viewmode-label">${field.label?html}:</span>
         <#if field.control.params.activateLinks?? && field.control.params.activateLinks == "true">
            <#assign fieldValue=field.value?html?replace("((http|ftp|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?\\^=%&:\\/~\\+#]*[\\w\\-\\@?\\^=%&\\/~\\+#])?)", "<a href=\"$1\" target=\"_blank\">$1</a>", "r")>
         <#else>
            <#if field.value?is_number>
               <#assign fieldValue=field.value?c>
            <#else>
               <#assign fieldValue=field.value?html>
            </#if>
         </#if>
         <span class="viewmode-value"><#if fieldValue == "">${msg("form.control.novalue")}<#else>${fieldValue}</#if></span>
      </div>
   <#else>
     <div class="autocomplete-container">
        <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
        <input id="${fieldHtmlId}" name="${field.name}" tabindex="0" size="8" autocomplete="off"
             <#if field.control.params.password??>type="password"<#else>type="text"</#if>
             <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
             <#if field.control.params.style??>style="${field.control.params.style}"</#if>
             <#if field.value?is_number>value="${field.value?c}"<#else>value="${field.value?html}"</#if>
             <#if field.description??>title="${field.description}"</#if>
             <#if field.control.params.maxLength??>maxlength="${field.control.params.maxLength}"<#else>maxlength="1024"</#if>
             <#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if> />
        <@formLib.renderFieldHelp field=field />

        <div id="${fieldHtmlId}-autocomplete-options"></div>
      </div>
   </#if>
</div>