Efeitos Usando jQuery - #2 - Recurso Autocomplete
Olá, hoje vou mostrar como fazer um Autocomplete, parecido com o da Google!
Essa é uma ótima função para facilitar a vida do leitor do seu site. Por se tratar de um efeito simples não interfere no tempo de carregamento do seu site.
Agora vamos ao código. Mas, antes de começar se lembre de importar as linhas de código para chamar o jQuery.
Agora Vamos inserir os dados que irá ser pesquisado pelo Autocomplete. Insira este código antes da tag </head>
Mas o que isto significa? Primeiro vamos começar por esta linha:
Mas, só isso? Ainda não, precisamos inserir o formulário de pesquisa, onde o usúario vai digitar sua pesquisa.
Pronto, seu Autocomplete está terminado. Espero que tenham gostado.
Essa é uma ótima função para facilitar a vida do leitor do seu site. Por se tratar de um efeito simples não interfere no tempo de carregamento do seu site.
Agora vamos ao código. Mas, antes de começar se lembre de importar as linhas de código para chamar o jQuery.
<script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script>var availableTags = [ela indica a abertura de uma variável que abaixo, lista todos os dados em que o autocomplete vai pesquisar. $( "#tags" ).autocomplete({ indica em que input a tag de pesquisa vai ser digitada.Mas, só isso? Ainda não, precisamos inserir o formulário de pesquisa, onde o usúario vai digitar sua pesquisa.
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
Pronto, seu código deverá ficar parecido com este:
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
Efeitos Usando jQuery - #2 - Recurso Autocomplete
![Efeitos Usando jQuery - #2 - Recurso Autocomplete]()
Reviewed by José Rafael
on
21:18
Rating:
gostei
ResponderExcluir