Resultado:
(http://img59.imageshack.us/img59/1202/autocomplete.png)
Aposto que a maioria já viu isso em prática da mesma forma que apósto que todos acham muito útil essa tecnica!
então vamos ao que interessa...
A ideia é simples, na página html você digita seu pais, o ajax cuida para pegar letra por letra e enviar ao php, logo o php consulta no banco mysql e retorna um resultado limitado por 10 para o Ajax!
Irei anexar ao tópico o link para download do demontrativo, bastando modificar os dados referentes ao MySQL para que funcione.
Vejamos:
Javascript: jQuery Nossa Função
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script><script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: "" inputString ""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
$('#suggestions').hide();
}
</script>
Vamos entender o Javascript
Ok, o código acima é a centro do script, isso nos permite enviar para o arquivo rpc.php que realiza todo o processamento.
A função de pesquisa pega a palavra no input e envia para a página rpc.php usando a função jQuery Ajax call POST.
IF o inputString é '0 '(zero), que esconde a caixa de sugestão, naturalmente, você não iria querer isso mostrando se não há nada na caixa de texto. para pesquisar.
ELSE pegamos a String do input e envia-lo para a página rpc.php, o jQuery $ post. Function (), veja..
[color=red]$.post(url, [data], [callback])[/color]
A parte 'callback' permite enviar os dados ao php, isto é onde a verdadeira magia, se é o que se pode chamar isso, acontece.
Se o comprimento de dados recebidos é superior a zero (isto é: há realmente algo para mostrar), mostra a caixa de sugestão e substitui o conteudo HTML com os dados retornados.
SIMPLES!
Vejamos o PHP codado para esse caso (RPC.php)
// PHP5 Implementation – uses MySQLi.
$db = new mysqli('localhost', 'root' ,", 'autoComplete');
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
// Is there a posted query string?
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
// Is the string length greater than 0?
if(strlen($queryString) >0) {
// Run the query: We use LIKE '$queryString%'
// The percentage sign is a wild-card, in my example of countries it works like this...
// $queryString = 'Uni';
// Returned data = 'United States, United Kindom';
$query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
if($query) {
// While there are results loop through them – fetching an Object (i like PHP5 btw!).
while ($result = $query ->fetch_object()) {
// Format the results, im using <li> for the list, you can change it.
// The onClick function fills the textbox with the result.
echo '<li onclick="fill(''.$result->value.'');">'.$result->value.'</li>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
}
?>
Explicando o PHP
Eu não vou entrar em muitos detalhes aqui, porque o codigo acima está comentado.
Basicamente, o que leva o 'QueryString' e faz uma consulta com um curinga no PT.
Isto significa que, cada letra digitada gera uma nova consulta.
O código PHP é a parte que você tem que mudar para trabalhar em seu sistema, e tudo o que está atualizando o "$ query" para seu banco de dados, você deve ser capaz de ver onde você coloca o nome da coluna na tabela de seu banco etc ...
CSS usado:
<style type="text/css">
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
E o minusculo HTML em nossa página:
<div>
<div>
Digite seu Pais:
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />
</div> <div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</div>
Puff, Auto Complete Feito :P
Fonte: nodstrum.com
Muito massa cara!
HTML cada vez mais extinto... rsrs
vlw reevu!
Muito bom, simples e pratico!! ;)
Vou fazer download p/ meus arquivos... vai ser útil...
Vlw Reeves!
Ferias em Janeiro, descolei 15 dias, mas nao sei ainda a data certa! LOL
@Phobia
HTML quase estinto ? Isso não tem sentido, uma vez que é a linguagem que te estrutura um site.
@Reeves
Muito cool o que mostras-te!
Quote from: Dkid on 26 de November , 2009, 05:52:50 AM
@Phobia
HTML quase estinto ? Isso não tem sentido, uma vez que é a linguagem que te estrutura um site.
¬¬'
pra começo html não é linguagem, é marcação, outra só com html que se faz site, não existe flash, java, ajax, não???
argh flws