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<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<?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
//busco un valor aproximado al dato escrito
$ssql = "SELECT id, titulo, precio, cantidad FROM mercaderia WHERE titulo LIKE '%" . $datoBuscar . "%' LIMIT 10";
//creo el array de los elementos sugeridos
$arrayElementos = array();
//bucle para meter todas las sugerencias de autocompletar en el array
$temp = $fila["titulo"].":".str_replace('.',',',$fila[precio
]).":".$fila[cantidad
];
----->>>>> 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>';
$temp = str_replace('<', '<span class="ot2"> $'.$t[1].'</span>', $temp1); }else {
$temp = str_replace('<', '<span class="ot2"> $'.$t[1].'</span>', $temp1); }
array_push($arrayElementos, new ElementoAutocompletar
($temp, $fila["id"].'-'.$fila["titulo"].' - $'.$fila["precio"])); //$fila["id"] }
?>
Código Javascript
:
Ver originalwindow.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 );