Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Filtrando uma lista de paises com jQuery

16-12-2010 21:49

Esse é um script bem interessante. A pessoa começa a digitar o nome do país em um input text, e, o script vai filtrando os valores de acordo com as letras digitadas.

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Simple list filter</title> <link href="http://github.com/Kilian/sencss/raw/master/source/sen.css" rel="stylesheet" type="text/css"> <style> body { background:#fff font-size:13px; } #wrap { position:relative; width:220px; margin:50px auto 0; } #header{position:relative;line-height:1em;} .filterform { width:220px; font-size:12px; display:block; } .filterform input { -moz-border-radius:5px; border-radius:5px; -webkit-border-radius:5px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> (function ($) { // custom css expression for a case-insensitive contains() jQuery.expr[':'].Contains = function(a,i,m){ return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function listFilter(header, list) { // header is any element, list is an unordered list // create and add the filter form to the header var form = $("<form>").attr({"class":"filterform","action":"#"}), input = $("<input>").attr({"class":"filterinput","type":"text"}); $(form).append(input).appendTo(header); $(input) .change( function () { var filter = $(this).val(); if(filter) { // this finds all links in a list that contain the input, // and hide the ones not containing the input while showing the ones that do $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(); $(list).find("a:Contains(" + filter + ")").parent().slideDown(); } else { $(list).find("li").slideDown(); } return false; }) .keyup( function () { // fire the above change event after every letter $(this).change(); }); } //ondomready $(function () { listFilter($("#header"), $("#list")); }); }(jQuery)); </script> </head> <body> <div id="wrap"> <h1 id="header">List of countries</h1> <ul id="list"> <li><a href="#/australia/">Australia</a></li> <li><a href="#/austria/">Austria</a></li> <li><a href="#/belgium/">Belgium</a></li> <li><a href="#/brazil/">Brazil</a></li> <li><a href="#/canada/">Canada</a></li> <li><a href="#/denmark/">Denmark</a></li> <li><a href="#/finland/">Finland</a></li> <li><a href="#/france/">France</a></li> <li><a href="#/germany/">Germany</a></li> <li><a href="#/greece/">Greece</a></li> <li><a href="#/ireland/">Ireland</a></li> <li><a href="#/israel/">Israel</a></li> <li><a href="#/italy/">Italy</a></li> <li><a href="#/japan/">Japan</a></li> <li><a href="#/luxembourg/">Luxembourg</a></li> <li><a href="#/mexico/">Mexico</a></li> <li><a href="#/netherlands/">Netherlands</a></li> <li><a href="#/norway/">Norway</a></li> <li><a href="#/poland/">Poland</a></li> <li><a href="#/portugal/">Portugal</a></li> <li><a href="#/russia/">Russia</a></li> <li><a href="#/spain/">Spain</a></li> <li><a href="#/sweden/">Sweden</a></li> <li><a href="#/switzerland/">Switzerland</a></li> <li><a href="#/turkey/">Turkey</a></li> <li><a href="#/united-kingdom/">United Kingdom</a></li> <li><a href="#/united-states/">United States</a></li> </ul> <p><a href="http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/">Back to blogpost on kilianvalkhof.com</a></p> </div> </body> </html>

Referência
http://kilianvalkhof.com/uploads/listfilter/
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado