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

[diego quinteros]

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)?

[Triby]

Tu tema es cosa de Javascript y no tanto de HTML, aunque sí debes agregar id a cada campo para facilitarte las cosas.

[alberto510a]

Hola prueba esto:

Código HTML:

onKeyUp="var a = document.getElementById('id_de_tu_select').value; showHint(this.value, a);"
 

Saludos

[diego quinteros]

@alberto510a Genial!!!

Funcionó.

Por las dudas, si a alguien le sirve:

HTML:

Código HTML:

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

JAVASCRIPT:

Código Javascript:

<script>
function showHint(str, ss){
    if (str.length == 0) { 
      document.getElementById("txtHint").innerHTML="";
      return;
    }
    if (ss.length == 0) { 
      document.getElementById("txtHint").innerHTML = "SELECCIONA Categoria";
      return;
    } else {
      document.getElementById("txtHint").innerHTML = ss;
    }
    
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
          }
    }
    
    xmlhttp.open("GET","new2.php?q=" + str + "&s=" + ss, true);
    xmlhttp.send();
}
 
</script>
 

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