Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Doble Input: búsqueda instantánea Ajax

Estas en el tema de Doble Input: búsqueda instantánea Ajax en el foro de Javascript en Foros del Web. Hola, estoy queriendo armar un sistema de búsqueda tipo Instant de G, pero necesito tomar Dos datos y no uno. Tengo el Input principal -donde ...
  #1 (permalink)  
Antiguo 08/07/2013, 13:47
 
Fecha de Ingreso: octubre-2006
Ubicación: The Far West, Buenos Aires
Mensajes: 262
Antigüedad: 15 años, 8 meses
Puntos: 28
Doble Input: búsqueda instantánea Ajax

Hola, estoy queriendo armar un sistema de búsqueda tipo Instant de G, pero
necesito tomar Dos datos y no uno.
Tengo el Input principal -donde el usuario introduce su término de búsqueda-
y un campo Option -donde tiene que seleccionar alguna categoría-.
Sé que poniendo el típico botón 'Submit' podría solucionarlo, pero no tendría el
efecto Instant.


Código:
<script>
function showHint(str, categoria){
/*
de aquí en adelante, una vez que recojo los dos parámetros ya me funcionaría todo ;-)
pero la función llamada onKeyUp sólo envía el valor del input, no ambos :(
*/
 // ajax...
}
</script>

Código HTML:
<form> 
	Ingrese su busqueda: 
        <input type="text" onKeyUp="showHint(this.value, ?????)">
	<select name="users" <!-- onChange="showUser(this.value)" -->>
		<option value="">Seleccioná Categoria:</option>
		<option value="1">Categoria 1</option>
		<option value="2">Categoria 2</option>
		<option value="3">Categoria 3</option>
	</select>
</form> 
La pregunta es: ¿cómo hago para enviar ambos datos (el input y el select)?
  #2 (permalink)  
Antiguo 08/07/2013, 13:50
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 13 años, 10 meses
Puntos: 2236
Respuesta: Doble Input: búsqueda instantánea Ajax

Tu tema es cosa de Javascript y no tanto de HTML, aunque sí debes agregar id a cada campo para facilitarte las cosas.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 08/07/2013, 14:37
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 9 años, 2 meses
Puntos: 35
Respuesta: Doble Input: búsqueda instantánea Ajax

Hola prueba esto:

Código HTML:
Ver original
  1. onKeyUp="var a = document.getElementById('id_de_tu_select').value; showHint(this.value, a);"

Saludos
__________________
No hay preguntas tontas, sino tontos que no preguntan.
  #4 (permalink)  
Antiguo 08/07/2013, 16:36
 
Fecha de Ingreso: octubre-2006
Ubicación: The Far West, Buenos Aires
Mensajes: 262
Antigüedad: 15 años, 8 meses
Puntos: 28
Respuesta: Doble Input: búsqueda instantánea Ajax

@alberto510a Genial!!!

Funcionó.

Por las dudas, si a alguien le sirve:

HTML:

Código HTML:
Ver original
  1. <p><b>Start typing a name in the input field below:</b></p>
  2. <form>
  3.     Ingrese su busqueda:
  4.     <input type="text" id="singleton" onKeyUp="var a = document.getElementById('id_select').value; showHint(this.value, a);">
  5.     <select name="users" id="id_select" onChange="var b = document.getElementById('singleton').value; showHint( b, this.value);">
  6.         <option value="">Seleccioná Supermercado:</option>
  7.         <option value="1">Carrefour</option>
  8.         <option value="2">Cooperativa Obrera</option>
  9.         <option value="3">Coto</option>
  10.         <option value="4">Disco</option>
  11.         <option value="5">Jumbo</option>
  12.         <option value="6">La Anónima</option>
  13.         <option value="7">La Libertad</option>
  14.         <option value="8">Vea</option>
  15.         <option value="9">Walmart</option>
  16.     </select>
  17. </form>
  18.  
  19. <p><span id="txtHint"></span></p>

JAVASCRIPT:

Código Javascript:
Ver original
  1. <script>
  2. function showHint(str, ss){
  3.     if (str.length == 0) {
  4.       document.getElementById("txtHint").innerHTML="";
  5.       return;
  6.     }
  7.     if (ss.length == 0) {
  8.       document.getElementById("txtHint").innerHTML = "SELECCIONA Categoria";
  9.       return;
  10.     } else {
  11.       document.getElementById("txtHint").innerHTML = ss;
  12.     }
  13.    
  14.     if (window.XMLHttpRequest) {
  15.       xmlhttp = new XMLHttpRequest();
  16.     } else {
  17.       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  18.     }
  19.    
  20.     xmlhttp.onreadystatechange = function() {
  21.         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  22.             document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
  23.           }
  24.     }
  25.    
  26.     xmlhttp.open("GET","new2.php?q=" + str + "&s=" + ss, true);
  27.     xmlhttp.send();
  28. }
  29.  
  30. </script>

Cualquier duda, pregunten...
El código anda de maravilla!

Etiquetas: ajax, html, instant, search
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




La zona horaria es GMT -6. Ahora son las 08:16.