JavaScript - flechas en autocompletar

   
Vista:

flechas en autocompletar

Publicado por Lucio (3 intervenciones) el 28/02/2010 04:53:51
Hola
Tengo un script que baje de internet, el cual lo utilizo en un autocompletar de un buscador hecho con PHP y MySQL. El script funciona perfecto, pero lo que no se como hacer es que el usuario pueda navegar por las opciones que aparecen en el autocompletar con las teclas arrowup y arrowdown (las flechitas).
No se casi nada de JS, pero por lo que me doy cuenta, creo que debería crear una función con los códigos de las teclas. Obviamente no lo se hacer. ¿Alguien me podría guiar un poco?
Gracias y saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

RE:flechas en autocompletar

Publicado por ScriptShow (387 intervenciones) el 01/03/2010 12:03:31
Saludos Lucio,

la función para los códigos:

<html>
<head>
<script type="text/javascript">
function valor(event)
{
alert(event.keyCode);
}
</script>
</head>

<body onkeyup="valor(event)">
<h2>Pulsa una tecla para ver el valor.</h2>
</body>
</html>

Con esto puedes averiguar y experimentar con los KeyCodes.

El evento del body onkeyup lo puedes cambiar por: onkeypress, onkeydown, etc.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:flechas en autocompletar

Publicado por Lucio (3 intervenciones) el 02/03/2010 04:28:49
¡Hola ScriptShow!
Gracias por responder.
Puse en practica el código que pusiste y entendí el concepto.
Lo que no entiendo es como relacionar el código con el autocompletar.
¿Tendría que ser a partir del id del autocompletar en el código CSS?
Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

RE:flechas en autocompletar

Publicado por ScriptShow (387 intervenciones) el 02/03/2010 16:49:13
Hola Lucio,

algunos buscadores utilizan AJAX, una técnica implementada de JavaScript muy útil para hacer requerimientos (peticiones) con respuesta casi inmediata. No obstante, habría que ver el Script en marcha para saber más sobre sus posibilidades. Incluso puede que sea necesario analizar el código fuente del Script Php.

Espero que lo soluciones. Si necesitas algo, avisa.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:flechas en autocompletar

Publicado por Lucio (3 intervenciones) el 03/03/2010 02:26:58
Hola ScriptShow.
Efectivamente el script utiliza AJAX.
Este es el codigo del archivo .js :

function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Tu navegador no es compatible. Intenta usando Mozilla Firefox, Apple Safari o Google Chrome");
}
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById('txtSearch').value);
searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('search_suggest')
ss.innerHTML = '';
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
}

//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('txtSearch').value = value;
document.getElementById('search_suggest').innerHTML = '';
}

Y este es el codigo del archivo .php:

<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-Type: text/xml; charset=utf-8");

//Get our database abstraction file
require('database.php');
///Make sure that a value was sent.
if (isset($_GET['search']) && $_GET['search'] != '') {
//Add slashes to any quotes to avoid SQL problems.
$search = addslashes($_GET['search']);
//Get every page title for the site.
$suggest_query = db_query(" SELECT rubro as suggest FROM comercios2 WHERE rubro LIKE('".$search."%') GROUP BY rubro UNION SELECT nombre as suggest FROM comercios2 WHERE nombre LIKE('".$search."%') GROUP BY nombre LIMIT 20 ");
while($suggest = db_fetch_array($suggest_query)) {
//Return each page title seperated by a newline.
echo $suggest['suggest']. "\n";
}
}
?>

El buscador emplea otro archivo (database.php) pero es donde esta seteada la conexión a la base de datos.
¿La función deberia ir en el archivo .js o en el html?
Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

RE:flechas en autocompletar

Publicado por ScriptShow (387 intervenciones) el 03/03/2010 13:36:56
Hola Lucio, perdona las molestias.

No te voy a cansar mucho con modificaciones, pruebas, etc. del Script. Vamos a ver algo inmediato; visita estas webs:

http://www.formatoweb.com.ar/ajax/

http://www.javascript-examples.com/autocomplete-demo/

A ver si encuentras una solución que se ajuste a tu diseño. Ya me comentarás...

Espero sea útil.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Video Edgar - Peliculas Online Subtituladas, Cine

Publicado por Peliculas Online (1 intervención) el 28/06/2010 02:26:24
gracias x el codigo =D
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar