Classe AutoComplete com Scriptaculous
Vou mostrar como criar uma classe em PHP para gerar campos do tipo autocomplete com AJAX ou do estilo do famoso google sujest. Esta classe irá utilizar o prototype js e o scriptaculous.
Scriptaculous
Prototype
Criando a classe AutoComplete
Esta classe terá somente uma função estática para facilitar a criação de vários campos no mesmo formulário.
autocomplete.php
<?php
class AutoComplete {
/**
* $id = id do campo text
* $valor = valor padrão para o campo
* $url = arquivo que irá retornar os dados para o campo
*/
public static function getCampo($id, $valor='', $url){
$retorno .= '<input id="'.$id.'" name="'.$id.'" type="text" value="'.$valor.'" />';
$retorno .= '<div id="'.$id.'update" style="display:none;border:1px solid #666;background-color:white;height:100px;overflow:auto;"></div>';
$retorno .= '<script>';
$retorno .= ' new Ajax.Autocompleter("'.$id.'","'.$id.'update","'.$url.'",{select:"selectme"});';
$retorno .= '</script>';
return $retorno;
}
}
?>
Criando o arquivo que retornará os dados em AJAX para o autocomplete
O retorno deste arquivo deverá ser uma lista, nesse exemplo vou colocar a lista direto, mas pode ser o retorno de uma consulta no banco.
retorno.html
<ul style='list-style: none;'> <li><span class="selectme">Valor 1</span></li> <li><span class="selectme">Valor 2</span></li> <li><span class="selectme">Valor 3</span></li> <ul>
Incluindo na página HTML
Nesta página deverá ser incluído os scripts para o prototype e scriptaculous.
<?php include 'autocomplete.php'; ?>
<html>
<head>
<title>Exemplo Autocomplete</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.selectme { padding:5px;cursor:pointer;}
.selected { background-color: #004286; color:#FFF }
</style>
</head>
<body>
<label> Exemplo 1 : <?php echo AutoComplete::getCampo('exp1','','retorno.html'); ?> </label> <br/>
<label> Exemplo 2: <?php echo AutoComplete::getCampo('exp2','','ajax.php'); ?></label> <br/>
</body>
</html>
Espero ter ajudado..
Para saber mais sobre Ajax.Autocompleter do Scriptaculous clique aqui.
