+52 55 4336 6356, +52 55 4336 6368 contacto@semantiq.com.mx

En este artículo mostraremos un código de ejemplo de SugarCRM JQuery autocomplete en el controller record.js o create.js toda la codificación se muestra a continuación:

Para la versión SugarCRM 8.3.x se está utilizando la librería JQuery v1.12.1

Ejemplo Controller Record.js

({
    extendsFrom: 'RecordView',

    initialize: function(options) {
        this.plugins = _.union(this.plugins || [], ['HistoricalSummary']);
        this._super('initialize', [options]);

        // Carga jquery-ui-min.css, jquery-ui-min.js ya está precargado en SugarCRM
        $('head').append('include/javascript/jquery/themes/base/jquery-ui-min.css');

       this.events['focus input[name=colonia_c]'] = 'colonia_autocomplete';
    },

    colonia_autocomplete: function (){
        var self = this;
        $("input[name='colonia_c']").autocomplete({
           // source consulta un servicio para completar el Array de resultados. Se puede sustituir por ['Colonai 1', 'Colonia 2'....]
           source: function( request, response ) {

               var colonia = request.term;
               if ( (!colonia) || (colonia == "")) colonia = "%";

               app.api.call('GET',app.api.buildURL('catalogo_sepomex/colonia/'+encodeURI(colonia)), null, {
                 success: function(data) {
                   response(data);
                 },
               });
       },
       minLength: 0, // Número de caracteres minimos para lanzar la consulta
       select: function( event, ui ) {
         //console.log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value);
         self.model.set('colonia_c',ui.item.label);
       },
       open: function() {
         $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
       },
       close: function() {
         $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
       }
 });
 // Lanzar la busqueda de las ciudades según la colonia seleccionada
 // $("input[name='ciudad_c']").trigger(jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } )); 
    },
})

Si quieres encontrar más ejemplos como este visita nuestra sección de artículos de SugarCRM.