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.