AnsweredAssumed Answered

Crear control autocomplete para seleccionar categoría

Question asked by patriciags on Feb 23, 2012
!Hola¡
Necesito crear una búsqueda textual de categorias para un formulario de búsqueda.Utilizo la version 3.4 d share.Inicialmente incluí la posibilidad de escoger categoría asignando la plantilla category.ftl. Pero dicha plantilla me hace la búsqueda mediante un data piker,que no me vale.
Estuve probando incluir  con yui el siguiente ejemplo http://developer.yahoo.com/yui/examples/autocomplete/ac_fn_multfields.html .
Para ello cree una plantilla que llame category-autocomplete-list.ftl ,pero no reconoce el javascript.Sim embargo el la plantilla para la cabecera de los formulario si se interpreta el javascript.
category-autocomplete-list.ftl

<#assign controlId = fieldHtmlId + "-cntrl">

<script type="text/javascript">//<![CDATA[
YAHOO.example.FnMultipleFields = function(){
    var categories = [
        {nodeRef:0, categoryName:"Alice", lname:"Abrams", nname:"ace"},
        {nodeRef:1, categoryName:"Abraham", lname:"Axelrod", nname:"Abe"},
        {nodeRef:2, categoryName:"Bruce", lname:"Baxter", nname:null},
        {nodeRef:3, categoryName:"Robert", lname:"Brown", nname:"Bob"},
        {nodeRef:4, categoryName:"Carl", lname:"Carlson", nname:null},
        {nodeRef:5, categoryName:"Charlie", lname:"Chaplin", nname:"Chuck"},
        {nodeRef:6, categoryName:"Darla", lname:"Darling", nname:null},
        {nodeRef:7, categoryName:"David", lname:"Dashing", nname:"Dave"},
        {nodeRef:8, categoryName:"Egbert", lname:"Excellent", nname:null},
        {nodeRef:9, categoryName:"Engleberg", lname:"Humperdink", nname:null}
    ];
    
    // Define a custom search function for the DataSource
    var matchNames = function(sQuery) {
        // Case insensitive matching
        var query = sQuery.toLowerCase(),
            category,
            i=0,
            l=categories.length,
            matches = [];
        
        // Match against each name of each category
        for(; i<l; i++) {
            category = categories[i];
            if((category.categoryName.toLowerCase().indexOf(query) > -1) ||
                (category.lname.toLowerCase().indexOf(query) > -1) ||
                (category.nname && (category.nname.toLowerCase().indexOf(query) > -1))) {
                matches[matches.length] = category;
            }
        }

        return matches;
    };

    // Use a FunctionDataSource
    var oDS = new YAHOO.util.FunctionDataSource(matchNames);
    oDS.responseSchema = {
        fields: ["nodeRef", "categoryName", "lname", "nname"]
    }

    // Instantiate AutoComplete
    var oAC = new YAHOO.widget.AutoComplete("categories-autocomplete-input", "categories-autocomplete-container", oDS);
    oAC.useShadow = true;
    oAC.resultTypeList = false;
    
    
    // Custom formatter to highlight the matching letters
    oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
        var query = sQuery.toLowerCase(),
            categoryName = oResultData.categoryName,
            lname = oResultData.lname,
            nname = oResultData.nname || "", // Guard against null value
            query = sQuery.toLowerCase(),
            categoryNameMatchIndex = categoryName.toLowerCase().indexOf(query),
            lnameMatchIndex = lname.toLowerCase().indexOf(query),
            nnameMatchIndex = nname.toLowerCase().indexOf(query),
            displaycategoryName, displaylname, displaynname;
            
        if(categoryNameMatchIndex > -1) {
            displaycategoryName = highlightMatch(categoryName, query, categoryNameMatchIndex);
        }
        else {
            displaycategoryName = categoryName;
        }

        if(lnameMatchIndex > -1) {
            displaylname = highlightMatch(lname, query, lnameMatchIndex);
        }
        else {
            displaylname = lname;
        }

        if(nnameMatchIndex > -1) {
            displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";
        }
        else {
            displaynname = nname ? "(" + nname + ")" : "";
        }

        return displaycategoryName + " " + displaylname + " " + displaynname;
        
    };
    
    // Helper function for the formatter
    var highlightMatch = function(full, snippet, matchindex) {
        return full.substring(0, matchindex) + 
                "<span class='match'>" + 
                full.substr(matchindex, snippet.length) + 
                "</span>" +
                full.substring(matchindex + snippet.length);
    };

    // Define an event handler to populate a hidden form field
    // when an item gets selected and populate the input field
    var categoriesAutocompleteHiddenField = YAHOO.util.Dom.get("categories-autocomplete-hidden");
    var myHandler = function(sType, aArgs) {
        var myAC = aArgs[0]; // reference back to the AC instance
        var elLI = aArgs[1]; // reference to the selected LI element
        var oData = aArgs[2]; // object literal of selected item's result data
        
        // update hidden form field with the selected item's ID
        categoriesAutocompleteHiddenField.value = oData.nodeRef;
        
        myAC.getInputEl().value = oData.categoryName + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
    };
    oAC.itemSelectEvent.subscribe(myHandler);
    
    return {
        oDS: oDS,
        oAC: oAC 
    };
}();
//]]></script>



<#if field.label != "">
<div class="form-field inlineable">
   <label for="categories-autocomplete-input">${field.label?html}:<#if field.mandatory!false><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
   <div id="categories-autocomplete">
      <#if field.disabled == false>
           <input id="categories-autocomplete-input" type="text" />
           <div id="categories-autocomplete-container"></div>
           <input id="categories-autocomplete-hidden" type="hidden" />
        </#if>
   </div>
</div>
</#if>
En la cabecera ,fichero form.get.head.ftl he incluido

<!– Dependency files for Auto Complete control –>
<link rel="stylesheet" type="text/css" href="${url.context}/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="${url.context}/yui/autocomplete/assets/skins/sam/autocomplete.css" />
<!–
<script type="text/javascript" src="${url.context}/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
–>
<script type="text/javascript" src="${url.context}/yui/connection-min.js"></script>
<script type="text/javascript" src="${url.context}/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="${url.context}/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="${url.context}/yui/autocomplete/autocomplete-min.js"></script>

No sé porque no sé interpreta el javascript.

Por otro lado he probado la solución  http://code.google.com/p/alfresco-forms-service-examples/downloads/list .
instale el amp y descomprimi la carpeta forms-32-share.zip tal cómo se dice en el pdf.Pero no soy a probarlo.
También he probado el form developement kit descargado del repositorio http://svn.alfresco.com/repos/alfresco-open-mirror/alfresco/HEAD/root/projects/fdk/

¿Alguién me puede aportar una solución o alguna idea?
He visto varias capturas de pantalla de formularios que tienen este control(autocomplete),pero no sé cómo lo hacen.
Gracias

Outcomes