jQuery Autocomplete color de fondo segun valor en tabla mysql

[Fernarey1810]

Quisiera cambiar el color de fondo de una opción que se despliega según un valor que tengo almacenado en una tabla en mysql. Como hago esto?

[Alexis88]

En el callback en donde desgloses la información recibida (en donde crees la lista desplegable), evalúa cada dato y según sea su valor, asignas un color de fondo al <li>.

Por ejemplo, en este ejemplo, personalizo las opciones de la lista desplegable, añadiéndole una foto y otros datos. En tu caso, solo haría falta que le asignes un color de fondo según el criterio que vayas a tomar en cuenta para ello.

Saludos

[Fernarey1810]

hola si te paso el ejercicio que estoy haciendo me podrias ayudar? porque hay algunas cosas que las hago "para que funcionen" pero creo que se deberian hacer de otra manera. tenes algun email o algo?

[Fernarey1810]

Iniciado por Alexis88

En el callback en donde desgloses la información recibida (en donde crees la lista desplegable), evalúa cada dato y según sea su valor, asignas un color de fondo al <li>.

Por ejemplo, en este ejemplo, personalizo las opciones de la lista desplegable, añadiéndole una foto y otros datos. En tu caso, solo haría falta que le asignes un color de fondo según el criterio que vayas a tomar en cuenta para ello.

Saludos

hola si te paso el ejercicio que estoy haciendo me podrias ayudar? porque hay algunas cosas que las hago "para que funcionen" pero creo que se deberian hacer de otra manera. tenes algun email o algo?

[Alexis88]

Coloca acá la parte crítica del código. No hay que ser mezquinos y compartamos lo que sabemos así como la manera en que solucionamos los problemas.

Saludos

[Fernarey1810]

Esto es lo que quiero hacer, pero no lei nada de la documentacion de jquery autocomplete esta en ingles.
1º - Quiero que se vaya poniendo en negrita y con otro color los carcteres que voy introduciendo en el input. COMO ACA
http://salman-w.blogspot.com.ar/2013...-examples.html
FIJATE EL EJEMPLO 4. Highlight Matched Text

2º. - Quiero que el php solo me devuelva el indice de la mercaderia, mas el titulo de la mercaderia que estoy buscando. Osea al seleccionar la mercaderia coloque en otro input el ID y en el input que busco el titulo. Por como lo hago yo me coloca todo en uno solo ID separado con un "-" y luego titulo. Tengo que usar explode luego para separarlos.
FIJATE EL EJEMPLO 1. Using Label-Value Pairs (EL DE ABAJO Modified Behavior) PORQUE HAY 2
3º.- Quiero que la lista se ponga de color rojo el fondo acorde a un valor de la tabla mysql, por ej si la cantidad es menor o igual a 1 se ponga rojo el fondo.

Esto que hice funciona pero no lo estoy haciendo como quiero. La base de datos ponele que tiene los siguientes campos:
id - integer
titulo - varchar

Código HTML:

<input type="text" value=""  id="mercaderia1" name="mercaderia[]" class="merc" >
 

Este es el codigo PHP que me devuelve los datos, usa la funcion procesar_formulario:

Código PHP:

<?php
//defino una clase que voy a utilizar para generar los elementos sugeridos en autocompletar
class ElementoAutocompletar {
   var $value;
   var $label;
   
   function __construct($label, $value){
      $this->label = $label;
      $this->value = $value;
   }
}
 
//recibo el dato que deseo buscar sugerencias
$datoBuscar = $_GET["term"];
 
//conecto con una base de datos
$conexion = mysql_connect("localhost", "root", "");
mysql_select_db("base_ropa");
 
//busco un valor aproximado al dato escrito
$ssql = "SELECT id, titulo, precio, cantidad FROM mercaderia WHERE titulo LIKE '%" . $datoBuscar . "%' LIMIT 10";
$rs = mysql_query($ssql);
 
//creo el array de los elementos sugeridos
$arrayElementos = array();
 
//bucle para meter todas las sugerencias de autocompletar en el array
while ($fila = mysql_fetch_array($rs)){
    $temp = $fila["titulo"].":".str_replace('.',',',$fila[precio]).":".$fila[cantidad];
    
    $t = explode(":", $temp);
        ----->>>>> ESTO ES LO QUE YO QUIERO QUE ME HAGA EL _renderItem PONER ROJO EL COLOR DE FONDO
    if ($t[2] <= 1) {
        $a = '<font style="background-color: #FFDDDD;">'.$t[0].'</font>';
        $temp1 = str_replace(strtolower($datoBuscar), '<b class="ot">'.$datoBuscar.'</b>', '<b>'.strtolower($a).' - &lt;</b>'); //$t[0]     
        $temp = str_replace('&lt;', '<span class="ot2"> $'.$t[1].'</span>', $temp1);
    }else {
        $temp1 = str_replace(strtolower($datoBuscar), '<b class="ot">'.$datoBuscar.'</b>', '<b>'.strtolower($t[0]).' - &lt;</b>');      
        $temp = str_replace('&lt;', '<span class="ot2"> $'.$t[1].'</span>', $temp1);
    }           
            
    array_push($arrayElementos, new ElementoAutocompletar($temp, $fila["id"].'-'.$fila["titulo"].' - $'.$fila["precio"])); //$fila["id"]
}
 
print_r(json_encode($arrayElementos));
?>
 

Código Javascript:

window.onload = function() {
    //jQuery.noConflict();
    run();
    
    function run() {
        $(".merc").autocomplete({
         source: "autocompletemer.php",         
         minLength: 2,
         html: 'html',
         focus: function(event, ui) {
                // prevent autocomplete from updating the textbox
                //event.preventDefault();
                // manually update the textbox
                //$(this).val(ui.item.label);
            },
         select: function(event, ui) {
                // prevent autocomplete from updating the textbox
                //event.preventDefault();
                // manually update the textbox and hidden field
                //$(this).val(ui.item.label);
                //$("#autocomplete2-value").val(ui.item.value);
            }               
         });
      
     }
     [COLOR="Red"]ESTOY USANDO ESTE COMPLEMENTO[/COLOR]
     /*
     * jQuery UI Autocomplete HTML Extension
     *
     * Copyright 2010, Scott González (http://scottgonzalez.com)
     * Dual licensed under the MIT or GPL Version 2 licenses.
     *
     * http://github.com/scottgonzalez/jquery-ui-extensions
     */
    (function( $ ) {
    var proto = $.ui.autocomplete.prototype,
        initSource = proto._initSource;
    
    function filter( array, term ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
        return $.grep( array, function(value) {
            return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
        });
    }
    
    $.extend( proto, {
        _initSource: function() {
            if ( this.options.html && $.isArray(this.options.source) ) {
                this.source = function( request, response ) {
                    response( filter( this.options.source, request.term ) );
                };
            } else {
                initSource.call( this );
            }
        },
    
        _renderItem: function( ul, item) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
                .appendTo( ul );
        }
    });
    })( jQuery );
 

[Alexis88]

Para lo primero, creo que te conviene utilizar el plugin del ejemplo, sería más rápido, aunque también hay forma de hacerlo desde cero. Para lo segundo, podrías hacer como hago en el ejemplo que te mostré, en donde cada dato está almacenado en índices de un array y a este array lo incluyo en otro que es el que finalmente devuelvo. Luego, como necesitas dos datos, pues ponlos en dos índices distintos, así como hice con el nombre y apellido del ejemplo.

Para lo tercero, creo que sería mejor si en cada array devuelves, además de los dos datos que mencionas, un tercero que indique el color a mostrar, luego, al recibir la respuesta en el código JS, asignas un color o una clase CSS al elemento para así darle el color que le corresponda. Esas serían simples condiciones.

Saludos