Re: [gtug-bsas] Necesito una mano con Jquery combobox autocomplete

Buenas,

No se si lo resolviste o no, pero te indico cuál es el inconveniente...

Lo que hace el código que anexa un select al widget autocomplete es muy bueno, pero los eventos que antes manejabas desde el select ahora deberías manejarlos desde el input autocomplete que genera... 

Si te fijas en los elementos con la consola de chrome o la herramienta que desees, vas a ver que el select está en display none antes que el input autocomplete, para poder trabajar con los eventos podrías hacer algo así como:

 $("#mycombobox").next().find("input:first").focusout(function () { 

    // tu codigo

   // en esta instancia ya contas con el $("#mycombobox").val() actualizado 

});

Saludos maxi

El martes, 8 de enero de 2013 18:45:11 UTC-3, maxib2007 escribió:

bueno, les pego el codigo que hice:

$(function() {

$.widget( "ui.combobox", {

            _create: function() {

                var input,

                    that = this,

                    select = this.element.hide(),

                    selected = select.children( ":selected" ),

                    value = selected.val() ? selected.text() : "",

                    wrapper = this.wrapper = $( "<span>" )

                        .addClass( "ui-combobox" )

                        .insertAfter( select );

 

                function removeIfInvalid(element) {

                    var value = $( element ).val(),

                        matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),

                        valid = false;

                    select.children( "option" ).each(function() {

                        if ( $( this ).text().match( matcher ) ) {

                            this.selected = valid = true;

                            return false;

                        }

                    });

                    if ( !valid ) {

                        // remove invalid value, as it didn't match anything

                        $( element )

                            .val( "" )

                            .attr( "title", value + " no se encuentra ninguna entrada" )

                            .tooltip( "open" );

                        select.val( "" );

                        setTimeout(function() {

                            input.tooltip( "close" ).attr( "title", "" );

                        }, 2500 );

                        input.data( "autocomplete" ).term = "";

                        return false;

                    }

                }

 

                input = $( "<input>" )

                    .appendTo( wrapper )

                    .val( value )

                    .attr( "title", "" )

                    .addClass( "ui-state-default ui-combobox-input" )

                    .autocomplete({

                        delay: 0,

                        minLength: 0,

                        source: function( request, response ) {

                            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

                            response( select.children( "option" ).map(function() {

                                var text = $( this ).text();

                                if ( this.value && ( !request.term || matcher.test(text) ) )

                                    return {

                                        label: text.replace(

                                            new RegExp(

                                                "(?![^&;]+;)(?!<[^<>]*)(" +

                                                $.ui.autocomplete.escapeRegex(request.term) +

                                                ")(?![^<>]*>)(?![^&;]+;)", "gi"

                                            ), "<strong>$1</strong>" ),

                                        value: text,

                                        option: this

                                    };

                            }) );

                        },

                        select: function( event, ui ) {

                            ui.item.option.selected = true;

                            that._trigger( "selected", event, {

                                item: ui.item.option

                            });

},

                        change: function( event, ui ) {

                            if ( !ui.item )

                                return removeIfInvalid( this );

}

                    })

                    .addClass( "ui-widget ui-widget-content ui-corner-left" );

input.data( "autocomplete" )._renderItem = function( ul, item ) {

return $( "<li>" )

.data( "item.autocomplete", item )

.append( "<a>" + item.label + "</a>" )

.appendTo( ul );

};

 

                $( "<a>" )

                    .attr( "tabIndex", -1 )

                    .attr( "title", "Show All Items" )

                    .tooltip()

                    .appendTo( wrapper )

                    .button({

                        icons: {

                            primary: "ui-icon-triangle-1-s"

                        },

                        text: false

                    })

                    .removeClass( "ui-corner-all" )

                    .addClass( "ui-corner-right ui-combobox-toggle" )

                    .click(function() {

                        // close if already visible

                        if ( input.autocomplete( "widget" ).is( ":visible" ) ) {

                            input.autocomplete( "close" );

                            removeIfInvalid( input );

                            return;

                        }

 

                        // work around a bug (likely same cause as #5265)

                        $( this ).blur();

 

                        // pass empty string as value to search for, displaying all results

                        input.autocomplete( "search", "" );

                        input.focus();

                    });

 

                    input

                        .tooltip({

                            position: {

                                of: this.button

                            },

                            tooltipClass: "ui-state-highlight"

                        });

},

 

            destroy: function() {

                this.wrapper.remove();

                this.element.show();

                $.Widget.prototype.destroy.call( this );

            }

        });

$( "#rubro" ).combobox();

$( "#tipo_negocio" ).combobox();

$( "#provincia" ).combobox();

$( "#localidad" ).combobox();

$( "#rubro_servicios" ).combobox();

$("#rubro_servicios").on('change', function(){

$.post("comprobar_registro2.php", { ui: ui }, function(data){

$("#list_servicios").html(data);

});

});

});

El lugar donde lo aplico es http://designmarket.com.ar/admin_prestadores/anadir_servicios.php

siendo #rubro_servicios el combobox que intento ponerle el post.

El 8 de enero de 2013 17:58, Jorge Cordero <cordero....@gmail.com> escribió:

Proba de poner "new" delante del $.post

Estas llamando a un xhr dentro de otro. Esto no es Inception...

Enviado desde mi iPhone

El 08/01/2013, a las 17:50, Pablo Moyano <ultr...@gmail.com> escribió:

El POST es asincronico, asi q no deberia dejarte esperando, queres pegar un poco de codigo aca para verlo?

2013/1/8 maxib2007 <maxi...@gmail.com>

Bueno basicamente yo use el code que provee Jquery UI para crear un combobox autocomplete.

http://jqueryui.com/autocomplete/#combobox

Si quiero hacer algo cuando se selecciona un valor del combobox, con el evento select le meto un alert, lo que sea, me lo toma.

Pero el problema viene si uso un $.post, ahi entra en espera hasta que tira timeout, obligandome a reniciar la pagina.

El problema es que yo necesito hacer un post a un php para recibir ciertos datos, no hay otra forma.

Que puedo hacer?

--
Has recibido este mensaje porque estás suscrito al grupo "GTUG BsAs" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus correos electrónicos, envía un correo electrónico a gtug-bsas+unsubscribe@googlegroups.com.
Para obtener más opciones, visita https://groups.google.com/groups/opt_out.