Lo primero que necesitamos es poder hacer consultas al servidor sobre algo, así que en lugar de crear una base de datos vamos a simular el comportamiento mediante un programa php muy simple.
<?php
if($_GET['q']){
$consulta=$_GET['q'];
$coche[0]="seat ibiza";
$coche[1]="opel corsa";
$coche[2]="ford fiesta";
$coche[3]="citroen ax";
$coche[4]="seat leon";
for($i=0;$i<5;$i++){
$devolver=1;
for($j=0;$j<strlen($consulta);$j++){
if($consulta[$j]!=$coche[$i][$j]){$devolver=0;}
}
if($devolver==1){echo $coche[$i] . "<br>";}
}
}
?>
De la consulta que reciba va a devolver los elementos del array coincidentes.
Para el código de autocompletado vamos a usar la librería de javascript prototype, tan solo hay que bajarla de la web oficial e incluirla como fuente en nuestra página.
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
</head>
<body>
<form method="get">
<input type="text" onkeyup="new Ajax.Updater('coches', 'query.php?q='+this.value, {method: 'get' })">
</form>
<br>
<div id="coches"></div>
</body>
</html>
Con el método Ajax.Updater vamos creando consultas conforme vamos escribiendo en la caja de texto y se añaden al div que hemos dejado para que vayan apareciendo.
0 comentarios:
Publicar un comentario