Foros del Web » Programando para Internet » Jquery »

Autocopletar en Select con jquery

Estas en el tema de Autocopletar en Select con jquery en el foro de Jquery en Foros del Web. Hola amigos del foro espero que me puedan ayudar hasta el momento tengo mi autocompletar en un input necesito el autocompletar en un select utilizo ...
  #1 (permalink)  
Antiguo 09/02/2011, 14:30
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Autocopletar en Select con jquery

Hola amigos del foro espero que me puedan ayudar

hasta el momento tengo mi autocompletar en un input
necesito el autocompletar en un select

utilizo la libreria jquery

estoy utilizando el siguiente codigo

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup

function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>

<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}

h3 {
margin: 0px;
padding: 0px;
}

.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList li {

margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}

.suggestionList li:hover {
background-color: #659CD8;
}
</style>

</head>

<body>


<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>

<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
&nbsp;
</div>
</div>
</form>
</div>

</body>
</html>



<?php

// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$servidor = 'localhost';
$bd = 'nover';
$usuario = 'postgres';
$contrasenia = 'admin';

global $servidor, $bd, $usuario, $contrasenia;
$db = new PDO('pgsql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);

// Is there a posted query string?


// Is the string length greater than 0?

$consulta = $db->prepare("SELECT r_social FROM clientes WHERE r_social LIKE '%$queryString%'");
$consulta->execute();


while($fila = $consulta->fetch(PDO::FETCH_ASSOC))
{
// Format the results, im using <li> for the list, you can change it.
// The onClick function fills the textbox with the result.

// YOU MUST CHANGE: $result->value to $result->your_colum
// echo "<td align='center'>" .$fila['r_social'] . "</td>";
echo '<li onClick="fill(\''.$fila['r_social'].'\');">'.$fila['r_social'].'</li>';
}



?>
  #2 (permalink)  
Antiguo 09/02/2011, 14:41
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

Tengo que llenar el select con datos de la base de datos
  #3 (permalink)  
Antiguo 09/02/2011, 14:49
 
Fecha de Ingreso: diciembre-2010
Mensajes: 788
Antigüedad: 9 años, 1 mes
Puntos: 50
Respuesta: Autocopletar en Select con jquery

Si tenés un select, no tiene sentido el autocompletar, ya que éste funciona con un campo que pueda filtrar el contenido y claramente no tenés forma de hacerlo en un SELECT. En todo caso, lo tendrás que hacer con ajax y json, o algo parecido.
  #4 (permalink)  
Antiguo 09/02/2011, 17:29
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

lo que quiero hacer es esto

http://jqueryui.com/demos/autocomplete/#combobox
pero cargando desde la base de datos
  #5 (permalink)  
Antiguo 09/02/2011, 17:45
 
Fecha de Ingreso: diciembre-2010
Mensajes: 788
Antigüedad: 9 años, 1 mes
Puntos: 50
Respuesta: Autocopletar en Select con jquery

Pues toma el ejemplo de ahí mismo, cuando tengas dudas de como implementarlo, vuelve a pedir ayuda ( igualmente están los ejemplos de código en esa misma página )
  #6 (permalink)  
Antiguo 09/02/2011, 17:58
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

este es el codigo que utilizo para el input

<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup

function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>

y en le rpc.php

<?php


$servidor = 'localhost';
$bd = 'nover';
$usuario = 'postgres';
$contrasenia = 'admin';

global $servidor, $bd, $usuario, $contrasenia;
$db = new PDO('pgsql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);

// Is there a posted query string?


// Is the string length greater than 0?

$consulta = $db->prepare("SELECT r_social FROM clientes WHERE r_social LIKE '$queryString%'");
$consulta->execute();


while($fila = $consulta->fetch(PDO::FETCH_ASSOC))
{
// Format the results, im using <li> for the list, you can change it.
// The onClick function fills the textbox with the result.

// YOU MUST CHANGE: $result->value to $result->your_colum
// echo "<td align='center'>" .$fila['r_social'] . "</td>";
echo '<li onClick="fill(\''.$fila['r_social'].'\');">'.$fila['r_social'].'</li>';
}



?>


este es el del combox del ejemplo de jquery

<script>
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( "<input>" )
.insertAfter( select )
.val( value )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autocomplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );

input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};

this.button = $( "<button type='button'>&nbsp;</button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.click(function() {
// close if already visible
if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
input.autocomplete( "close" );
return;
}

// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
},

destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );

$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
</script>

ayudemenme por favor
  #7 (permalink)  
Antiguo 09/02/2011, 18:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.596
Antigüedad: 17 años, 9 meses
Puntos: 1279
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 10/02/2011, 05:14
 
Fecha de Ingreso: diciembre-2010
Ubicación: granada
Mensajes: 31
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Autocopletar en Select con jquery

Hola montes28,

Puede que te sirva este código que va entre el <head> y habiendo cargado el jquery-ui-1.8.9.autocomplete.css y el jquery-ui-1.8.9.autocomplete.js que puedes sacar de la página que indicas (el select se llama id="combobox" y está vacio de primeras):

Código:
	(function( $ ) {
		$.widget( "ui.combobox", {
			_create: function() {
				var self = this,
					select = this.element.hide(),
					selected = select.children( ":selected" ),
					value = selected.val() ? selected.text() : "";
				var input = this.input = $( "<input>" )
					.insertAfter( select )
					.val( value )
					.autocomplete({
						delay: 1,
						// minlength = caracteres minimos que hay que pulsar para empezar la busqueda
						minLength: 4,
						source: function( request, response ) {
							var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
							response( select.children( "option" ).map(function() {
								var text = $( this ).text();
								if ( this.value && ( !request.term || matcher.test(text) ) )
									return {
										label: text.replace(
											new RegExp(
												"(?![^&;]+;)(?!<[^<>]*)(" +
												$.ui.autocomplete.escapeRegex(request.term) +
												")(?![^<>]*>)(?![^&;]+;)", "gi"
											), "<span style='color: #000000;'>$1</span>" ),
										value: text,
										option: this
									};
							}) );
						},
						select: function( event, ui ) {
							ui.item.option.selected = true;
							self._trigger( "selected", event, {
								item: ui.item.option
							});
						},
						change: function( event, ui ) {
							if ( !ui.item ) {
								var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
									valid = false;
								select.children( "option" ).each(function() {
									if ( $( this ).text().match( matcher ) ) {
										this.selected = valid = true;
										return false;
									}
								});
								if ( !valid ) {
									// remove invalid value, as it didn't match anything
									$( this ).val( "" );
									select.val( "" );
									input.data( "autocomplete" ).term = "";
									return false;
								}
							}
						}
					})
					.addClass( "ui-widget ui-widget-content ui-corner-left ui-lista-select" );

				input.data( "autocomplete" )._renderItem = function( ul, item ) {
					return $( "<li></li>" )
						.data( "item.autocomplete", item )
						.append( "<a>" + item.label + "</a>" )
						.appendTo( ul );
				};

				this.button = $( "<button type='button'>&nbsp;</button>" )
					.attr( "tabIndex", -1 )
					.attr( "title", "Visualizar todo el contenido" )
					.insertAfter( input )
					.button({
						icons: {
							primary: "ui-icon-triangle-1-s"
						},
						text: false
					})
					.removeClass( "ui-corner-all" )
					.addClass( "ui-corner-right ui-button-icon" )
					.click(function() {
						// close if already visible
						if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
							input.autocomplete( "close" );
							return;
						}

						// pass empty string as value to search for, displaying all results
						input.autocomplete( "search", "" );
						input.focus();
					});
			},

			destroy: function() {
				this.input.remove();
				this.button.remove();
				this.element.show();
				$.Widget.prototype.destroy.call( this );
			}
		});
	})( jQuery );

	$(function() {
                $( "#combobox" ).combobox();
		$( "#toggle" ).click(function() {
			$( "#combobox" ).toggle();
		});
});
Creo que te cambia automáticamente el input por un select, lo malo es que (por lo menos a mi), no te va a funcionar con la base de datos...

Yo he abierto tambien una pregunta para ver si alguien me puede echar una mano implementando al autocomplete combobox el tema de la base de datos: que al teclear 4 caracteres se recarguen los registro que contengan esos caracteres y luego se pueda hacer su selección en el combo.

Por favor, díme algo si consigues implementarlo con la base de datos, pues llevo mucho tiemp dándole vueltas y no lo consigo. Gracias.
  #9 (permalink)  
Antiguo 10/02/2011, 09:33
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

hola albeolo si logro implementarlo te lo hare saber y si vos lo implementas me lo haces saber gracias

empezemos a implementario que ideas tienees ?
  #10 (permalink)  
Antiguo 10/02/2011, 14:02
 
Fecha de Ingreso: diciembre-2010
Ubicación: granada
Mensajes: 31
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Autocopletar en Select con jquery

Hola Montes,

Pues la verdad que poca, pero estoy investigando... Si me surje una idea la pondré aquí. Sigo buscando.

La verdad que en todo el foro no hay nada que nos sirva... ya lo revisé de cabo a rabo con "autocompletar" y nada de nada. Ahora investigo en la web; estoy echándole mucho tiempo a este asunto...
  #11 (permalink)  
Antiguo 10/02/2011, 14:30
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

Hola albeolo

con el automplete que tengo me funcia bien pero me llena un input yo necesito un select para enviar un id o como hago que con el autocomplete que tengo me llene ese input pero tambien me llene un input con el id
  #12 (permalink)  
Antiguo 10/02/2011, 14:37
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

mira esto http://af-design.com/blog/2010/05/12...pulate-a-form/
  #13 (permalink)  
Antiguo 10/02/2011, 15:41
 
Fecha de Ingreso: diciembre-2010
Ubicación: granada
Mensajes: 31
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Autocopletar en Select con jquery

Vale, le echaré un vistazo a ver si lo engancho y te digo...
Ya te puedo decir que vi algo parecido y no conseguí implementar. Al final en el print del php hay que poner algo para el utf8, para que reconozca las ñ y los acentos. Ya veré.
  #14 (permalink)  
Antiguo 10/02/2011, 16:12
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

albeolo dame una mano , implementemos

necesito mucho implementarlo
  #15 (permalink)  
Antiguo 10/02/2011, 16:27
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

necesito implementar algo como esto

http://ajaxdump.com/?tn5SeMwE
  #16 (permalink)  
Antiguo 10/02/2011, 16:37
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

hola albeolo encontre esto

http://www.technomedia.co.uk/SuperBo...lesRemote.html
  #17 (permalink)  
Antiguo 10/02/2011, 20:32
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

encontre esto pero no se como implementarlo

http://www.ashlux.com/wordpress/2009...e-with-ext-js/
  #18 (permalink)  
Antiguo 10/02/2011, 20:38
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

hola albeolo creo que encontre lo que estabamos necesitando miralo y ayudame a implementarlo


http://mabp.kiev.ua/content/source/a...ocomplete.html
  #19 (permalink)  
Antiguo 11/02/2011, 09:29
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

hola albeolo mira lo que encontre como se puede implementar

http://mabp.kiev.ua/2008/04/08/autocomplete/
  #20 (permalink)  
Antiguo 11/02/2011, 12:30
 
Fecha de Ingreso: diciembre-2010
Ubicación: granada
Mensajes: 31
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Autocopletar en Select con jquery

Hola Montes,

He visto los enlaces. Los dos últimos son el mismo, y si no te has dado cuenta sólo filtran las opciones que empiezan por lo que se teclea (si tecleas "es" muestra: Estado, Esquimal... pero no muestra Narices, Empresa... )...

Mira estos video-tutoriales que me ha facilitado otro forero por otro lado:

"Videos tutoriales mantenimiento una tabla base de datos mysql, con jquery ui autocomplete, ajax y php":

Video 1 (11') : http://www.youtube.com/user/jvsoftware#p/u/14/n93ExATvzDg
Video 2 (14:23'): http://www.youtube.com/user/jvsoftware#p/u/13/AWiKZjvg_wM
video 3 (12:16'): http://www.youtube.com/user/jvsoftware#p/u/12/osymKQ3rsg0
video 4 (12:06'): http://www.youtube.com/user/jvsoftware#p/u/11/yZQO45XzPlE
video 5 (14:52'): http://www.youtube.com/user/jvsoftware#p/u/10/14BZu67fq1E
video 6 (15:00'): http://www.youtube.com/user/jvsoftware#p/u/9/-lQe05v7Bhc
video 7 (6:55'): http://www.youtube.com/user/jvsoftware#p/u/8/LgaZyQKzbwY

El tutor, Javier Villanueva es muy bueno: lo explica paso a paso, rápido, ordenado y esquemático... desde luego es lo mejor que he visto para iniciarse con esto de ajax y el autocomplete de jquery: Lástima que no habla del combobox, sólo utiliza un autocomplete sencillo, y del source tampoco amplia mucha información... pero lo demás, muy clarito lo deja...

Espero te sirva. Yo he tardado varias horas en verlos todos, mientras lo iba estudiando y apuntando. Ahora quiero implementarlo con lo mio, sin el combobox, y después con el combobox, a ver si me lucen estas horas que he echado... Ya hasta el lunes no podré volver.

Un saludo y ánimo, que ya queda menos... verás...!

Última edición por albeolo; 14/02/2011 a las 10:47
  #21 (permalink)  
Antiguo 16/02/2011, 08:10
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.852
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Autocopletar en Select con jquery

hola albeolo

he intentado implementar pero no he podido..

como vas ?
  #22 (permalink)  
Antiguo 18/02/2011, 08:37
 
Fecha de Ingreso: febrero-2011
Mensajes: 15
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Autocopletar en Select con jquery

hola albeolo y montes28, estuve indagando porque tambien tuve que implementar lo que uds buscan y he dado con una solucion para llenar el combobox con una tabla de base de datos...
por si aun no han conseguido hacerlo les dejo la solucion tomando el tema en una pagina que uds publicaron "http://jqueryui.com/demos/autocomplete/#combobox":
en donde esta el select
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
este select debes llenarlo con la tabla, yo lo realize de esta manera con jquery:
el codigo php para traer los datos de mi base de datos:
<?
require("php/global.php");//este es mi conexion a la bd
include_once("php/CPManipulacion.php");//clase para traer los datos

$result = $gCDB->RetornarCursorAbierto("SELECT * FROM pasajeros where id_cliente='1713'");//sentencia de query
//creo los option del select y coloco los datos de mi tabla
$opciones ="<option value='-1' selected='selected'>Escoja lo Pax</option>";
while($campos=$gCDB->TraerRegistro($result)){
$texto =$campos["nombre"];
$valor =$campos["id_pax"];
$opciones.="<option value=\"$valor\">".utf8_encode($texto)."</option>";

}
?>
y el html del select es:
<select id="combobox">
<? echo $opciones; ?>
</select>


el codigo completo:

<?
require("php/global.php");
include_once("php/CPManipulacion.php");

$result = $gCDB->RetornarCursorAbierto("SELECT * FROM pasajeros where id_cliente='1713'");
$opciones ="<option value='-1' selected='selected'>Escoja lo Pax</option>";
while($campos=$gCDB->TraerRegistro($result)){
$texto =$campos["nombre"];
$valor =$campos["id_pax"];
$opciones.="<option value=\"$valor\">".utf8_encode($texto)."</option>";
}
?>

<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Combobox</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.button.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="demos.css">
<style>
.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; }
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
</style>
<script>
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var input = this.input = $( "<input>" )
.insertAfter( select )
.val( value )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( select.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>" ),
value: text,
option: this
};
}) );
},
select: function( event, ui ) {
ui.item.option.selected = true;
self._trigger( "selected", event, {
item: ui.item.option
});
},
change: function( event, ui ) {
if ( !ui.item ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
valid = false;
select.children( "option" ).each(function() {
if ( $( this ).text().match( matcher ) ) {
this.selected = valid = true;
return false;
}
});
if ( !valid ) {
// remove invalid value, as it didn't match anything
$( this ).val( "" );
select.val( "" );
input.data( "autocomplete" ).term = "";
return false;
}
}
}
})
.addClass( "ui-widget ui-widget-content ui-corner-left" );

input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};

this.button = $( "<button>&nbsp;</button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.click(function() {
// close if already visible
if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
input.autocomplete( "close" );
return;
}

// pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
input.focus();
});
},

destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
});
})( jQuery );

$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
<label>Your preferred programming language: </label>
<select id="combobox">
<? echo $opciones; ?>
</select>
</div>
<button id="toggle">Show underlying select</button>

</div><!-- End demo -->


</body>
</html>
  #23 (permalink)  
Antiguo 21/02/2011, 03:33
 
Fecha de Ingreso: diciembre-2010
Ubicación: granada
Mensajes: 31
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Autocopletar en Select con jquery

Hola axtm, la verdad es que tiene muy buena pinta lo que dices. Voy a investigar y te digo.

Desde ya, muchas gracias por tu esfuerzo y ayuda.
  #24 (permalink)  
Antiguo 21/02/2011, 07:03
 
Fecha de Ingreso: diciembre-2010
Ubicación: granada
Mensajes: 31
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Autocopletar en Select con jquery

... ya veo, creo que lo que pretendes es primero rellenar el select con toda la tabla, para luego al teclear en el combobox, que muestre los que contengan los caracteres que se vayan pulsando... pero y si tienes una tabla con 2000 registros? ¿como se haría para que sólo se trajera y rellenara los option del select en el momento después que se hayan tecleado por ejemplo 3 caracteres, y así reducir la busqueda luego...? así no tendría que rellenar el select con tantos registros, y sería más efectivo...

Etiquetas: autocompletado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:29.