Foro de elhacker.net

Buen día, haber si alquilen me puede ayudar con el aucomplete de Jquery que ya me tiene loco ....

Pues tengo una tabla que tiene la siguiente estructura

CREATE TABLE vehiculo_color
(
  idcolor serial NOT NULL,
  color CHARACTER VARYING(30),
  CONSTRAINT vehiculo_color_pk PRIMARY KEY (idcolor)
)

En una pagina lst_color.php tengo el codigo siguiente que muestra el resultado:

<?
// codigo que conecta a bd y almacena todo en un array para luego mostrarlo
print json_encode($fetch_query);
?>

El resultado de eso es lo siguiente:

[{"idcolor":"6","color":"AMARILLO"},{"idcolor":"3","color":"AZUL"},{"idcolor":"2","color":"BLANCO"},{"idcolor":"4","color":"NEGRO"},{"idcolor":"7","color":"PLOMO"},{"idcolor":"8","color":"PLOMO \/ BLANCO"},{"idcolor":"5","color":"ROJO"},{"idcolor":"1","color":"VERDE"}]

Ahora en la pagina que deseo filtrar tengo el siguiente código:

<style>
    .ui-autocomplete-loading {
        background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
    }
    </style>
    <script>
    $(function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }
 
        $( "#birds" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "lst_color.php",
					dataType: "json",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.idcolor + " , " + (item.color),
								value: item.color
							}
						}));
					}
				});
			},
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.color + " aka " + ui.item.idcolor :
                    "Nothing selected, input was " + this.value );
            }
        });
    });
    </script>
 
<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" />
</div>
 
<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

Esta es la imagen del autocomplete funcionando.


Pues bien el problema es que como se darán cuenta en la imagen si bien esta listando el contenido de la tabla no esta haciendo el filtro correspondiente, en la imagen el texto dice AMARILLO sin embargo el autocomplete muestra todo y no "amarillo" como se supone que debería ser.

Espero sus comentarios.
Gracias desde ya.
Saludos.

Hola, un poco tarde pero..

Nunca habia usado el widget autocomplete de jQuery UI pero he deducido una cosilla a partir de los datos que da Firebug.

(http://i.elhacker.net/i?i=SDIjlTA9KtajTTR-qOVnX2Vo)

Parece ser que si usas una función (por tanto no un array) con el autocomplete de jQuery UI debes filtrar tu mismo el resultado.

Luego me he leído un poco de su api y parece es así..


Por tanto, deduzco que deberías crear tu propia función de autocompletado o en su defecto pasar el json a un array normal que el autocomplete de jQuery UI pueda tratar solito xD.

Saludos