Ver Mensaje Individual
  #6 (permalink)  
Antiguo 13/10/2014, 21:25
Avatar de Fernarey1810
Fernarey1810
 
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años, 1 mes
Puntos: 1
Respuesta: jQuery Autocomplete color de fondo segun valor en tabla mysql

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:
Ver original
  1. <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:
Ver original
  1. <?php
  2. //defino una clase que voy a utilizar para generar los elementos sugeridos en autocompletar
  3. class ElementoAutocompletar {
  4.    var $value;
  5.    var $label;
  6.    
  7.    function __construct($label, $value){
  8.       $this->label = $label;
  9.       $this->value = $value;
  10.    }
  11. }
  12.  
  13. //recibo el dato que deseo buscar sugerencias
  14. $datoBuscar = $_GET["term"];
  15.  
  16. //conecto con una base de datos
  17. $conexion = mysql_connect("localhost", "root", "");
  18. mysql_select_db("base_ropa");
  19.  
  20. //busco un valor aproximado al dato escrito
  21. $ssql = "SELECT id, titulo, precio, cantidad FROM mercaderia WHERE titulo LIKE '%" . $datoBuscar . "%' LIMIT 10";
  22. $rs = mysql_query($ssql);
  23.  
  24. //creo el array de los elementos sugeridos
  25. $arrayElementos = array();
  26.  
  27. //bucle para meter todas las sugerencias de autocompletar en el array
  28. while ($fila = mysql_fetch_array($rs)){
  29.     $temp = $fila["titulo"].":".str_replace('.',',',$fila[precio]).":".$fila[cantidad];
  30.    
  31.     $t = explode(":", $temp);
  32.         ----->>>>> ESTO ES LO QUE YO QUIERO QUE ME HAGA EL _renderItem PONER ROJO EL COLOR DE FONDO
  33.     if ($t[2] <= 1) {
  34.         $a = '<font style="background-color: #FFDDDD;">'.$t[0].'</font>';
  35.         $temp1 = str_replace(strtolower($datoBuscar), '<b class="ot">'.$datoBuscar.'</b>', '<b>'.strtolower($a).' - &lt;</b>'); //$t[0]    
  36.         $temp = str_replace('&lt;', '<span class="ot2"> $'.$t[1].'</span>', $temp1);
  37.     }else {
  38.         $temp1 = str_replace(strtolower($datoBuscar), '<b class="ot">'.$datoBuscar.'</b>', '<b>'.strtolower($t[0]).' - &lt;</b>');     
  39.         $temp = str_replace('&lt;', '<span class="ot2"> $'.$t[1].'</span>', $temp1);
  40.     }          
  41.            
  42.     array_push($arrayElementos, new ElementoAutocompletar($temp, $fila["id"].'-'.$fila["titulo"].' - $'.$fila["precio"])); //$fila["id"]
  43. }
  44.  
  45. print_r(json_encode($arrayElementos));
  46. ?>

Código Javascript:
Ver original
  1. window.onload = function() {
  2.     //jQuery.noConflict();
  3.     run();
  4.    
  5.     function run() {
  6.         $(".merc").autocomplete({
  7.          source: "autocompletemer.php",        
  8.          minLength: 2,
  9.          html: 'html',
  10.          focus: function(event, ui) {
  11.                 // prevent autocomplete from updating the textbox
  12.                 //event.preventDefault();
  13.                 // manually update the textbox
  14.                 //$(this).val(ui.item.label);
  15.             },
  16.          select: function(event, ui) {
  17.                 // prevent autocomplete from updating the textbox
  18.                 //event.preventDefault();
  19.                 // manually update the textbox and hidden field
  20.                 //$(this).val(ui.item.label);
  21.                 //$("#autocomplete2-value").val(ui.item.value);
  22.             }              
  23.          });
  24.      
  25.      }
  26.      [COLOR="Red"]ESTOY USANDO ESTE COMPLEMENTO[/COLOR]
  27.      /*
  28.      * jQuery UI Autocomplete HTML Extension
  29.      *
  30.      * Copyright 2010, Scott González (http://scottgonzalez.com)
  31.      * Dual licensed under the MIT or GPL Version 2 licenses.
  32.      *
  33.      * http://github.com/scottgonzalez/jquery-ui-extensions
  34.      */
  35.     (function( $ ) {
  36.     var proto = $.ui.autocomplete.prototype,
  37.         initSource = proto._initSource;
  38.    
  39.     function filter( array, term ) {
  40.         var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
  41.         return $.grep( array, function(value) {
  42.             return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
  43.         });
  44.     }
  45.    
  46.     $.extend( proto, {
  47.         _initSource: function() {
  48.             if ( this.options.html && $.isArray(this.options.source) ) {
  49.                 this.source = function( request, response ) {
  50.                     response( filter( this.options.source, request.term ) );
  51.                 };
  52.             } else {
  53.                 initSource.call( this );
  54.             }
  55.         },
  56.    
  57.         _renderItem: function( ul, item) {
  58.             return $( "<li></li>" )
  59.                 .data( "item.autocomplete", item )
  60.                 .append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
  61.                 .appendTo( ul );
  62.         }
  63.     });
  64.     })( jQuery );

Última edición por Fernarey1810; 13/10/2014 a las 22:00