Olá amigos hoje trago para vocês um tutorial bem interessante, sobre o jquery, vamos fazer um exemplo bem simples se talvez você já qeubrou cabeça pra fazer aquelas tag´s que surgem quando o usuario digita um termpo por exemplo "javascript".
Bom, se quiser algo mais avançado, sugiro que continue acompanhando o blog porque irei postar um código bem diferente deste futuramente, algo que seja mais interessante e integrado ao php, mas neste exemplo vou trazer um digamos: "quebra galho" para você que quer algo bem simples e que nem utilize o php, basta você colocar as palavras em um array, ou melhor as tag´s.
vamos começar !!!
primeiro criamos um array com as tags que seram sugeridas para o usuario:
var sugst = ["html", "jquery", "php", "css", "javascript"];
Capturamos o que foi digitado pelo usuario e jogamos em uma variável:
$("#tags").keyup(function () {
var valor = $(this).val();
Detectamos se o usuario digitar a vírgula, este será o caractere separador de tags
if (valor.indexOf(",") != -1) {
var junta = valor.split(",");
perceba que a variavel junta separa pelo caractere virgula a nossa string valor.
Para que tudo ocorra bem, é essencial que gravemos em uma variavel tudo o que o usuario digitou anteriormente, caso cotrario teremos uma substituição de conteúdo e não é isso que queremos.
var ant = $("#exibe").html();
Para tanto a variavel ant armazenará o valor html do nosso paragrafo onde estão sendo exibidas as tags.
Vamos atualizar o valor do paragrafo de id "exibe" e sempre colocando o qu ele já possui, mesmo estando vazio, tudo dará certo:
$("#exibe").html(ant + "<span>" + junta[0] + "</span>");
$(this).val("");
Bom e apagamos o conteúdo do nosso campo input
Nosso exemplo podia até parar aqui, mas o objetivo deste nosso código jquery é sugerir palavras ou tags para o usuario.
portanto precisamos fazer uma pequena busca no nosso array
if (sugst[i][0].indexOf(valor) != -1) {
neste caso, vou buscar pela primeira letra que o usuario digitar, porém claro precisaremos criar um laço que percorrerá todo o nosso array.
for (i=0; i <= 5; i++) {
if (sugst[i][0].indexOf(valor) != -1) {
var a = sugst[i];
$("#sugestao").html("<span class='btn'>" + a + "</span>");
E aqui o que fizemos?
Bom eu apenas guardei a nossa busca na variavel a e joguei dentro de um paragrafo com id "sugestao" que ficará abaixo do nosso campo de texto, perceba também que atribui ao mesmo a classe "btn", pois quero fazer um script que fará com que esta tag seja inserida na lista de tags pois ela foi sugerida, agora se o usuario deseja colocar, temos que dar esta possibilidade a ele.
$(".btn").click(function () {
var ant2 = $("#exibe").html();
$("#exibe").html(ant2 + "<span>" + a + "</span>");
$("#tags").val("");
$(this).hide();
});
}
A mesma coisa que fizemos na hora de inserir as tags pelo metodo keyup.
Vou deixar aqui o código completo:
<!DOCTYPE html>
<html lang="pt_br">
<head>
<title> Tags </title>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
var sugst = ["html", "jquery", "php", "css", "javascript"];
$("#tags").keyup(function () {
var valor = $(this).val();
if (valor.indexOf(",") != -1) {
var junta = valor.split(",");
var ant = $("#exibe").html();
$("#exibe").html(ant + "<span>" + junta[0] + "</span>");
$(this).val("");
}
for (i=0; i <= 5; i++) {
if (sugst[i][0].indexOf(valor) != -1) {
var a = sugst[i];
$("#sugestao").html("<span class='btn'>" + a + "</span>");
$(".btn").click(function () {
var ant2 = $("#exibe").html();
$("#exibe").html(ant2 + "<span>" + a + "</span>");
$("#tags").val("");
$(this).hide();
});
}
}
});
});
</script>
<style>
span {background-color:blue; padding:2px; font-size:16px; font-weight:bolder; margin-left:5px; color:#fff;}
</style>
</head>
<body>
<p id="exibe"></p>
<p> <input type="text" name="tags" id="tags" autoComplete="Off"> </p>
<p id="sugestao"></p>
</body>
</html>
E aqui você pode baixar o exmplo completo
Fique conectado ao blog, temos muitos outros códigos muito interessantes para você
Nenhum comentário:
Postar um comentário