Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/10/2009, 10:26
Avatar de aldo1982
aldo1982
 
Fecha de Ingreso: noviembre-2004
Ubicación: Santa Fe (Argentina) Colon F.C
Mensajes: 1.362
Antigüedad: 19 años, 5 meses
Puntos: 6
Mover cursor con flechas del teclado en autocompletar jquery

buenas gente, tengo un autocompletar con jquery y me gustaria poder implementar el desplazamiento de lso items del autocompletar mediante las flechas del teclado.

aca dejo el codigo para ver si me peuden dar una mano.

Código:
<script type="text/javascript">
	function lookup(keywords) {
		if(keywords.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("advanced_search_result_autocompletar.php", {queryString: ""+keywords+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show("slide");
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#keywords').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
	$(document).ready(function(){		
		$("#cerrar_sugerencias").click(function(){
				$("#suggestions").slideToggle("slow");
		});
			
	});	
</script>

Código:
<div><input autocomplete="off" class="input_buscar" name="keywords" id="keywords" value="<?=$valor_input?>" onkeyup="lookup(this.value);" onblur="fill();"  /></div>
        <div class="suggestionsBox" id="suggestions" style="display:none;">
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td  height="45" width="9" valign="top">
                <!-- <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> -->
                <div class="suggestionList" id="autoSuggestionsList">
                
                </div>                
            </td>
          </tr>
          <tr>
          	<td align="right" style=" padding-right:8px; padding-bottom:4px;"><a id="cerrar_sugerencias" href="#">Cerrar sugerencias</a></td>
          </tr>
        </table>
        </div>
Código:
require('includes/application_top.php');
// este include es el ke determina el precio con o sin iva y la lsita de precio correspondiente :P
include (DIR_WS_INCLUDES."fnc_includes/determinar_precio_iva.php");
//echo "Sugerencias".$_POST['queryString']."<br>";
//echo $customer_id;
if(isset($_POST['queryString'])) {
	$filtrar = addslashes($_POST['queryString']);
	// Is the string length greater than 0?			
	if(strlen($filtrar) >0) {
		mysql_query("SET NAMES utf8");
		$sql = "select * from tabla_productos
			";		
		$query = tep_db_query($sql);		 
		while ($result = tep_db_fetch_array($query)) {
			$filtrar = strtolower($filtrar);
			$filtrar_en = strtolower($result["products_name"]);
			
			$resaltados_txt = str_replace($filtrar,"<b style='color:#0000ff;'>".$filtrar."</b>",$filtrar_en);
			?>            
			 <li onClick="fill('<?=$result["products_name"]?>');"><? echo $resaltados_txt //=$result["products_name"]?></li>  
			<?
			//echo '<li onClick="fill(\''.$result["products_name"].'\');">'.$result["products_name"].'</li>';
		}
	}
}
__________________
LA MUERTE ESTÁ TAN SEGURA DE VENCER QUE NOS DA TODA UNA VIDA DE VENTAJA