Jquery y autocomplete .. muestra contenido de tbl pero no filtra. ayuda

[Hadess_inf]

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

Código (sql) [Seleccionar] Expandir

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:

Código (php-brief) [Seleccionar] Expandir

<?
// 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:

Código (html4strict) [Seleccionar] Expandir

[{"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:

Código (html4strict) [Seleccionar] Expandir

<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.

[#!drvy]

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.



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í..

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:

• A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
• A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

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