Anónimo
Filtrar desde un Text un Select Multiple
En un formulario que tiene un Text y un SelectMultiple, lo que Necesito es que cuando escriba algún carácter en el text, el select múltiple se filtre.
Ejemplo: En un listado con los países en un select múltiple, al digitar "c" en el Text, que filtre en el select múltiple los países:
Chile
Colombia
También que cada uno de los países que están en el listado es direccionado a una página ya creada (Page1.html, Page2.html, ...) y cuando se filtren los países, al hacer clic en uno de los países filtrados, cargue la página que le corresponde sobre la página principal.
Ejemplo: En un listado con los países en un select múltiple, al digitar "c" en el Text, que filtre en el select múltiple los países:
Chile
Colombia
También que cada uno de los países que están en el listado es direccionado a una página ya creada (Page1.html, Page2.html, ...) y cuando se filtren los países, al hacer clic en uno de los países filtrados, cargue la página que le corresponde sobre la página principal.
2 respuestas
Respuesta de krlosnow
2
Echa un vistazo a este código:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
var paisesHidden;
$(document).ready(function(){
$('#buscadorPaises').bind('keypress', function(e){
var inicio = $('#buscadorPaises').val() + String.fromCharCode(e.keyCode);
actualizaLista(inicio);
});
$('#buscadorPaises').bind('keydown', function(e){
switch (e.keyCode){
case 8:
var actual = $('#buscadorPaises').val();
if (actual){
var inicio = actual.substr(0,actual.length-1);
actualizaLista(inicio);
}
break;
}
});
paisesHidden = $('#selectorPaisesHidden');
$('#selectorPaises').html(paisesHidden.html());
});
function actualizaLista(inicio){
var paises = paisesHidden.clone();
inicio = inicio.toLowerCase();
$('#selectorPaises').html('');
paises.find('option[title^="' + inicio + '"]').each(function(){
$('#selectorPaises').append($(this));
$(this).bind('click', function(){
document.location.href = $(this).attr('url');
});
});
}
function clickEnlace(url){
}
</script>
</head>
<body>
<input type="text" id="buscadorPaises"></input>
<br/>
<select id="selectorPaises" multiple="multiple">
</select>
<div id="paisesHidden" style="display:none">
<select id="selectorPaisesHidden" multiple="multiple">
<option id="chile" value="chile" title="chile" url="http://www.chile.com" onclick="clickEnlace(this)">Chile</option>
<option id="colombia" value="colombia" title="colombia" url="http://www.colombia.com" onclick="clickEnlace(this)">Colombia</option>
<option id="españa" value="españa" title="españa" url="http://www.españa.com/" onclick="clickEnlace(this)">España</option>
<option id="venezuela" value="venezuela" title="venezuela" url="http://www.venezuela.com" onclick="clickEnlace(this)">Venezuela</option>
</select>
</div>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
var paisesHidden;
$(document).ready(function(){
$('#buscadorPaises').bind('keypress', function(e){
var inicio = $('#buscadorPaises').val() + String.fromCharCode(e.keyCode);
actualizaLista(inicio);
});
$('#buscadorPaises').bind('keydown', function(e){
switch (e.keyCode){
case 8:
var actual = $('#buscadorPaises').val();
if (actual){
var inicio = actual.substr(0,actual.length-1);
actualizaLista(inicio);
}
break;
}
});
paisesHidden = $('#selectorPaisesHidden');
$('#selectorPaises').html(paisesHidden.html());
});
function actualizaLista(inicio){
var paises = paisesHidden.clone();
inicio = inicio.toLowerCase();
$('#selectorPaises').html('');
paises.find('option[title^="' + inicio + '"]').each(function(){
$('#selectorPaises').append($(this));
$(this).bind('click', function(){
document.location.href = $(this).attr('url');
});
});
}
function clickEnlace(url){
}
</script>
</head>
<body>
<input type="text" id="buscadorPaises"></input>
<br/>
<select id="selectorPaises" multiple="multiple">
</select>
<div id="paisesHidden" style="display:none">
<select id="selectorPaisesHidden" multiple="multiple">
<option id="chile" value="chile" title="chile" url="http://www.chile.com" onclick="clickEnlace(this)">Chile</option>
<option id="colombia" value="colombia" title="colombia" url="http://www.colombia.com" onclick="clickEnlace(this)">Colombia</option>
<option id="españa" value="españa" title="españa" url="http://www.españa.com/" onclick="clickEnlace(this)">España</option>
<option id="venezuela" value="venezuela" title="venezuela" url="http://www.venezuela.com" onclick="clickEnlace(this)">Venezuela</option>
</select>
</div>
</body>
</html>
Gracias por el código. Es justo lo que necesitaba, pero no me abren las páginas al hacer click en cualquiera de los países que están en la lista. No se si falta algún código adicional en la función clickEnlace(url).
Espero tu respuesta. Muchas Gracias.
Espero tu respuesta. Muchas Gracias.
Efectivamente, el código de clickEnlace() lo tienes que implementar tú para hacer lo que quieras.
Respuesta de jask
Bueno lo que pides es más que HTML. Te recomiendo que preguntes en la parte de Javascript o incluso Ajax ya que usa esta tecnolocía. He visto algo, con el tema de los países, al seleleccionar una letra te carga los datos que empiezan por esa letra, pero lo que vi tira desde una base de datos. Me imagino que no habrá mucha complicación desde un archivo de texto común donde se almacenen los países, o en un mismo array.
Aun así indaga un poco con el tema de jQuery para los países, que hay muchos ejemplos en la red. En lo demás ya te cometo que tiene que se Ajax, ya que HTML no tiene ninguna función así al respecto, simplemente es para dar una forma a la web :)
Aun así indaga un poco con el tema de jQuery para los países, que hay muchos ejemplos en la red. En lo demás ya te cometo que tiene que se Ajax, ya que HTML no tiene ninguna función así al respecto, simplemente es para dar una forma a la web :)