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>';
}
}
}