Tema: un buscador
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 06/08/2008, 15:10
Avatar de Taldreakan
Taldreakan
 
Fecha de Ingreso: julio-2008
Mensajes: 128
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: un buscador

Ahora viene lo bueno.
Esto es solo codigo HTML y JS.

Código HTML:
 <form name="form1">

                <input name="codigo" type="text"class="textoNormal">
                <input name="inputname" type="text" class="textoNormal">

          <div align="center">
            <p class="textoNormal"> Nombre:
                <input name="buscanombre" type="text" id="buscanombre" onKeyPress="keyCode_Busca(event);" class="textoNormal">
                <script>
				function keyCode_Busca(event)
					{
						code = event.keyCode;
						if (code == 13)
							{
								event.keyCode=0;
								LlenaListaBusca();
								return false;
							}
						if (code == 27)
							{
					   			event.keyCode=0;			
								document.getElementById('busca').style.visibility = "hidden";
								document.form1.inputname.focus();
								document.form1.inputname.select();
							}
					}
	
				function LlenaListaBusca()
					{
					    VaciaListaBusca();
					    var myListBox=document.form1.lista;
						
						nom_bus = document.form1.buscanombre.value.toUpperCase();
					    for (i=0; i<cat_prod; i++)
						    {
								nom_aux = cat_nombre[i].toUpperCase();								
								if (nom_aux.indexOf(nom_bus) > -1)
									{
										myOption = new Option(cat_nombre[i], cat_codigo[i]);
								        optionPos = myListBox.options.length;
						        		myListBox.options[optionPos] = myOption;
									}
						    }
						document.form1.lista.focus();
						document.form1.lista.selectedIndex = 0;
					}

				function VaciaListaBusca()
					{
					    var myListBox=document.form1.lista

					    for (i=myListBox.length; i>=0; i--)
						    {
						        myListBox.options[i] = null;
						    }
					}
				
				function selectProd(event)
					{
						code = event.keyCode;
						if (code == 13)
							{								
								EligeProd();
								return false;
							}
						if (code == 27 || code == 13)
							{
					   			document.getElementById('busca').style.visibility = "hidden";
								event.keyCode=0;
								document.form1.inputname.focus();
								document.form1.inputname.select();
							}									
					}
					
				function EligeProd()
					{
						cad = document.form1.codigo.value;
						pos = cad.indexOf("*");
						if (pos > 0)
							{
								cad = cad.substring(0, pos+1);	// Cantidad de un producto
							}
						else
								cad = "";
						document.getElementById('busca').style.visibility = "hidden";
						document.form1.codigo.value = cad+document.form1.lista.options[form1.lista.selectedIndex].value;
						document.form1.inputname.value = document.form1.lista.options[form1.lista.selectedIndex].text;
						document.form1.inputname.focus();
					}
			</script>
            </p>
            <p>
              <select name="lista" size="10" onkeypress="selectProd(event);" ondblclick="EligeProd();" class="textoNormal">
                <option value="<?php echo 'num_Codigo'; ?>"><?php echo 'txt_Producto'; ?></option>
              </select>
            </p>
          </div>
      </form> 
Dentro de la capa (div) tengo dos elementos que son los que hacen todo el show: un Input text y un Select.

En el input es donde se teclea el nombre del producto.
El select es la lista que se llenara filtrando los productos por el contenido del input.

En mi caso no ocupo ningun boton de buscar, yo lo controlo con el evento onKeyPress y en el codigo Java cacho el codigo de la tecla Enter (13) para simular el boton de buscar.

Luego despues de que se vacia y se vuelve allenar el select, dentro de este tambien controlo la seleccion del producto con Enter o Doble Clic, el codigo de producto y el nombre los envio a dos input text (codigo, inputname)para darle el tratamiento que necesito.