Instant search a la Facebook

Quick demo made for @pierrevalade to filter in real-time a long list of DOM element.
The filter algorithm is framework agnostic Javascript. This demo uses jQuery only to handle DOM events and get DOM elements.

The main problem is performance. You can write nice and clean code based on jQuery but it will be very slow. This is why code is just regular javascript (and could be more optimize). Code is on github sgruhier/instant-search-a-la-facebook is you want to play with it.

Try it, now! The list contains 1000 name generated by the ruby name generator found in this article.

Filter friends list :
  • Abdiel
  • Ablarne
  • Abran
  • Abreyson
  • Aby
  • Adarry
  • Addy
  • Adel
  • Adendomar
  • Adenelipe
  • Adennasid
  • Adevio
  • Adiemilly
  • Adin
  • Adinny
  • Adreny
  • Ady
  • Ahmethami
  • Aiguy
  • Ain
  • Alalese
  • Alan
  • Ald
  • Ald
  • Ald
  • Ald
  • Aldo
  • Aldon
  • Aldon
  • Alee
  • Aleennon
  • Alejah
  • Alejaynes
  • Alem
  • Alennavin
  • Aleo
  • Aler
  • Alexan
  • Alexavin
  • Aley
  • Alfre
  • Aliaher
  • Alieliel
  • All
  • Allinnoah
  • Alliust
  • Altos
  • Alvin
  • Amil
  • Amois
  • Andlen
  • Andleon
  • Androdyle
  • Antimmen
  • Anu
  • Anuel
  • Arcus
  • Ardon
  • Ariquel
  • Arnaace
  • Aron
  • Arre
  • Arry
  • Arrya
  • Arso
  • Arson
  • Arsony
  • Artimmary
  • Aryan
  • Asharodne
  • Ashaul
  • Ason
  • Auliantin
  • Aunix
  • Aus
  • Aviem
  • Avinally
  • Axson
  • Baleendan
  • Banne
  • Barlogelv
  • Barlon
  • Barrie
  • Bas
  • Bas
  • Basil
  • Ben
  • Ben
  • Benas
  • Benie
  • Bennichan
  • Berarc
  • Berau
  • Berisacio
  • Bian
  • Biley
  • Bincerrey
  • Binorbert
  • Blan
  • Blan
  • Blandonat
  • Bober
  • Brad
  • Braddisco
  • Brah
  • Brah
  • Bran
  • Bran
  • Bran
  • Bran
  • Brand
  • Brardouin
  • Braun
  • Bravice
  • Bravionso
  • Braydeand
  • Braylar
  • Brayle
  • Brayle
  • Braymon
  • Brayn
  • Brayto
  • Brayton
  • Breanikei
  • Breddie
  • Brel
  • Bren
  • Bretrence
  • Bretthel
  • Brew
  • Briagangt
  • Brichadar
  • Brichanti
  • Brie
  • Brio
  • Bro
  • Bron
  • Bruberada
  • Bry
  • Bry
  • Bry
  • Cad
  • Caed
  • Caideon
  • Caileb
  • Calco
  • Cald
  • Call
  • Camreni
  • Can
  • Carc
  • Card
  • Card
  • Card
  • Carlomert
  • Carrede
  • Carry
  • Cary
  • Cashawson
  • Chaden
  • Chan
  • Chane
  • Charc
  • Chary
  • Chas
  • Chawn
  • Chawredga
  • Cheiden
  • Chennovan
  • Chil
  • Choe
  • Chrielson
  • Chris
  • Clarichan
  • Clason
  • Cliamiang
  • Colber
  • Colfo
  • Colforion
  • Coll
  • Coln
  • Con
  • Con
  • Con
  • Con
  • Con
  • Cor
  • Cor
  • Cordan
  • Coregarre
  • Corger
  • Corylakai
  • Cott
  • Crake
  • Cran
  • Cribran
  • Cricto
  • Crie
  • Crissephe
  • Crustin
  • Cruz
  • Cul
  • Curintona
  • Cyreeg
  • Dald
  • Daleo
  • Dalex
  • Dall
  • Dall
  • Dame
  • Damel
  • Dan
  • Dan
  • Dan
  • Dan
  • Dan
  • Dan
  • Dan
  • Dand
  • Dane
  • Dant
  • Daque
  • Dar
  • Darett
  • Dariser
  • Darjus
  • Dark
  • Darlerran
  • Darlip
  • Daro
  • Darquison
  • Darres
  • Dartebaid
  • Darwistep
  • Davin
  • Daytobern
  • Demirvion
  • Den
  • Den
  • Den
  • Den
  • Den
  • Den
  • Denatt
  • Denjardon
  • Denny
  • Dent
  • Dentophaw
  • Deon
  • Deory
  • Der
  • Der
  • Der
  • Deren
  • Desac
  • Dessiandr
  • Deubre
  • Devan
  • Devonzais
  • Diell
  • Dison
  • Domik
  • Don
  • Don
  • Don
  • Don
  • Don
  • Don
  • Donne
  • Dor
  • Dorie
  • Drody
  • Duandenda
  • Duantery
  • Dul
  • Dulli
  • Dundy
  • Duntint
  • Dunton
  • Dus
  • Dwaryloug
  • Eath
  • Edennatre
  • Edenny
  • Edo
  • Edre
  • Edwaldon
  • Edy
  • Efaelin
  • Effrale
  • Efran
  • Elianny
  • Eliantona
  • Elie
  • Elikelm
  • Eliustafa
  • Ell
  • Ell
  • Elleec
  • Ellen
  • Elo
  • Elson
  • Emaxson
  • Emie
  • Emylonath
  • Eri
  • Erno
  • Erte
  • Ertiahmat
  • Ertustiah
  • Essiantha
  • Ethent
  • Ett
  • Ette
  • Euger
  • Euglejamo
  • Eve
  • Everc
  • Evis
  • Evo
  • Evonas
  • Ezerson
  • Ezrandrol
  • Fellarton
  • Fer
  • Fer
  • Fer
  • Fidevion
  • Fin
  • Fin
  • Fon
  • Fradeauli
  • Frane
  • Fraylosey
  • Fre
  • Fred
  • Fredgan
  • Freg
  • Fren
  • Fren
  • Frestisag
  • Freteve
  • Gaiaguy
  • Gan
  • Gan
  • Garc
  • Garegor
  • Garictonn
  • Garyle
  • Gavielip
  • Gaviergin
  • Gavisager
  • Gavor
  • Gel
  • Ger
  • Ger
  • Germauliu
  • Giahillie
  • Giam
  • Gian
  • Gian
  • Gid
  • Gil
  • Gilivan
  • Gillordo
  • Gin
  • Gion
  • Glertiame
  • Glevon
  • Gley
  • Gran
  • Gran
  • Granathel
  • Gravi
  • Greemerma
  • Grel
  • Grett
  • Grevielle
  • Guan
  • Gue
  • Guelius
  • Guelte
  • Guno
  • Gus
  • Gussesuli
  • Gustin
  • Gustyn
  • Hamres
  • Hamzand
  • Han
  • Hant
  • Harson
  • Hary
  • Haspen
  • Heage
  • Hean
  • Hen
  • Henteb
  • Hoe
  • Holn
  • Huno
  • Hunton
  • Hur
  • Hurtucarl
  • Ian
  • Iber
  • Ibrias
  • Igordo
  • Isa
  • Isai
  • Ise
  • Ismoin
  • Istur
  • Ivan
  • Iven
  • Jac
  • Jace
  • Jachadort
  • Jackean
  • Jad
  • Jad
  • Jadamarno
  • Jage
  • Jahawson
  • Jahewin
  • Jahir
  • Jai
  • Jaiah
  • Jaian
  • Jaigh
  • Jakaiah
  • Jake
  • Jaleon
  • Jam
  • Jamard
  • Jamart
  • Jamede
  • Jamictan
  • Jamingert
  • Jamiroy
  • Jamme
  • Jammy
  • Jamo
  • Jamon
  • Jamon
  • Jamreemit
  • Jamrekhil
  • Jamrey
  • Janu
  • Jaque
  • Jaquie
  • Jarcel
  • Jarder
  • Jari
  • Jaricamil
  • Jarick
  • Jarmald
  • Jaroshame
  • Jary
  • Jas
  • Javerremm
  • Javi
  • Javichand
  • Javiel
  • Javin
  • Javon
  • Jax
  • Jaxton
  • Jaxwes
  • Jay
  • Jay
  • Jaylart
  • Jayleb
  • Jaymo
  • Jayn
  • Jayton
  • Jaytophar
  • Jef
  • Jef
  • Jef
  • Jefa
  • Jeff
  • Jeffel
  • Jeffid
  • Jeffinny
  • Jeffraxim
  • Jer
  • Jer
  • Jer
  • Jeran
  • Jereysons
  • Jerody
  • Jerre
  • Jeshewale
  • Jesleyton
  • Jett
  • Jeve
  • Jim
  • Jim
  • Joaquelo
  • Joaquiel
  • Joe
  • Joe
  • Joel
  • Joen
  • Johandera
  • Johawn
  • John
  • John
  • John
  • Johnnerre
  • Jon
  • Jon
  • Jon
  • Jonatrier
  • Jord
  • Joregoreu
  • Jorgael
  • Jorge
  • Jormatt
  • Jory
  • Jos
  • Josir
  • Jovad
  • Jovald
  • Jovan
  • Jovan
  • Jovan
  • Judandero
  • Juden
  • Juden
  • Judevin
  • Judson
  • Judylan
  • Jul
  • Jul
  • Julip
  • Jullin
  • Jun
  • Junichanu
  • Junor
  • Junte
  • Junto
  • Jus
  • Jus
  • Jus
  • Kadance
  • Kadas
  • Kadavie
  • Kaddie
  • Kadineill
  • Kadlerais
  • Kain
  • Kalosey
  • Kam
  • Kamiel
  • Kamon
  • Kar
  • Karlincar
  • Karlip
  • Karredwan
  • Kayshamin
  • Kean
  • Keathante
  • Keiderley
  • Keill
  • Keim
  • Kel
  • Kelijains
  • Ken
  • Ken
  • Ken
  • Ken
  • Kenaelis
  • Kendleen
  • Keodinne
  • Kerodne
  • Kes
  • Keslemary
  • Kestanick
  • Kevince
  • Kevonar
  • Key
  • Keynaven
  • Kiereduan
  • Kir
  • Kob
  • Kobermos
  • Kobin
  • Koby
  • Koby
  • Kold
  • Kolderet
  • Kolen
  • Kolfon
  • Kolip
  • Kologaris
  • Korberrys
  • Kriamrene
  • Kriandris
  • Kriannon
  • Krica
  • Krin
  • Kylando
  • Kylex
  • Lack
  • Lail
  • Lakadan
  • Lan
  • Lar
  • Larincel
  • Lash
  • Layde
  • Lees
  • Lejareven
  • Len
  • Leon
  • Ler
  • Lerrisham
  • Lew
  • Lexim
  • Ley
  • Liah
  • Liff
  • Lipen
  • Lisamson
  • Lomaron
  • Lon
  • Lony
  • Lord
  • Luc
  • Lucad
  • Lucar
  • Luce
  • Lucer
  • Luck
  • Luke
  • Lukeatath
  • Luper
  • Mad
  • Maedwaric
  • Maj
  • Maj
  • Maleondo
  • Malex
  • Man
  • Man
  • Man
  • Mardon
  • Mariage
  • Maricad
  • Marive
  • Marke
  • Marlo
  • Marlo
  • Marlo
  • Marlon
  • Marloseon
  • Maron
  • Marrantin
  • Marren
  • Marren
  • Marry
  • Marson
  • Mart
  • Marternaa
  • Martonn
  • Mary
  • Mas
  • Mas
  • Mase
  • Masianger
  • Maspernel
  • Matephilo
  • Mathandre
  • Matharry
  • Matt
  • Maubenix
  • Maul
  • Mauronatt
  • Mavin
  • Maximilly
  • Maximohau
  • Maxtodne
  • Maxwestin
  • Men
  • Merek
  • Miahie
  • Michawn
  • Mik
  • Mik
  • Mil
  • Min
  • Min
  • Mir
  • Mis
  • Mithean
  • Mohn
  • Mohnark
  • Moin
  • Mon
  • Mon
  • Mon
  • Mon
  • Monater
  • Moss
  • Mossid
  • Muhawn
  • Musserter
  • Naarod
  • Nahi
  • Nalerrian
  • Nalt
  • Naroophil
  • Narrison
  • Nathamith
  • Nathett
  • Ner
  • Nerne
  • Nic
  • Nicarrevi
  • Nick
  • Nickyl
  • Nicott
  • Nictave
  • Noah
  • Noleroben
  • Non
  • Novald
  • Occolan
  • Olar
  • Olaylo
  • Oman
  • Omardo
  • Omastucal
  • Ome
  • Orlie
  • Osbassiro
  • Oseatt
  • Oseffrard
  • Oshael
  • Oshamer
  • Osvan
  • Osvathend
  • Pabrayne
  • Parkus
  • Patan
  • Paunnaton
  • Paxon
  • Pay
  • Paynes
  • Pett
  • Pett
  • Phancer
  • Phawn
  • Pheatrice
  • Pheldorev
  • Phen
  • Phill
  • Pie
  • Pieliah
  • Poreariso
  • Prafa
  • Pray
  • Pree
  • Prett
  • Quan
  • Quez
  • Quilogeo
  • Quin
  • Quis
  • Rah
  • Rahem
  • Ralfory
  • Ran
  • Ran
  • Ran
  • Randren
  • Rany
  • Rar
  • Rarkuston
  • Ray
  • Raydeny
  • Raydo
  • Raylan
  • Raynardo
  • Redgainat
  • Ree
  • Reg
  • Relivalec
  • Ren
  • Rentwan
  • Reven
  • Revon
  • Rey
  • Rhewarel
  • Riahad
  • Riamilto
  • Richardo
  • Rician
  • Rick
  • Rion
  • Riq
  • Ristis
  • Roder
  • Roderryce
  • Rodrobeat
  • Rogaing
  • Rogell
  • Rohnne
  • Rolasolfo
  • Roln
  • Roln
  • Romaldo
  • Romancyru
  • Romesmon
  • Romiliand
  • Ron
  • Ron
  • Ron
  • Ron
  • Ron
  • Rondavene
  • Rosid
  • Roy
  • Roy
  • Roy
  • Rudem
  • Runo
  • Rustin
  • Ruz
  • Ryand
  • Saacky
  • Saakelso
  • Sae
  • Sage
  • Saidel
  • Sainenjar
  • Sairor
  • Sal
  • Salide
  • Salvinny
  • Sam
  • San
  • Sance
  • Sau
  • Scolber
  • Scoldo
  • Sconett
  • Scot
  • Seon
  • Ses
  • Ses
  • Sett
  • Shael
  • Sham
  • Shan
  • Shan
  • Shangerry
  • Shawn
  • Shawrey
  • Shen
  • Sher
  • Side
  • Siley
  • Silianley
  • Sillie
  • Sinaarnei
  • Sir
  • Sky
  • Son
  • Son
  • Son
  • Sondresle
  • Sony
  • Spe
  • Spedroy
  • Steonatha
  • Ster
  • Stin
  • Stin
  • Stin
  • Stinger
  • Stingtobb
  • Sto
  • Stomat
  • Ston
  • Ston
  • Ston
  • Stua
  • Stur
  • Sturnathu
  • Stus
  • Styroy
  • Styso
  • Stystustu
  • Syer
  • Tan
  • Tandenry
  • Tarren
  • Tathan
  • Tavero
  • Tavin
  • Tavingeon
  • Tavistinc
  • Tay
  • Tay
  • Taytomath
  • Tephe
  • Ternalvan
  • Terory
  • Tezralen
  • Thanten
  • Ther
  • Thunoltop
  • Tin
  • Tin
  • Tine
  • Tobbyrubr
  • Tomisawn
  • Ton
  • Ton
  • Ton
  • Tonaryl
  • Tophi
  • Tran
  • Tre
  • Tre
  • Tremio
  • Tren
  • Trent
  • Trett
  • Treviel
  • Trey
  • Tri
  • Trickenno
  • Trin
  • Triste
  • Trodenesm
  • Trogan
  • Tuadevore
  • Tylan
  • Tylendave
  • Tylo
  • Tyn
  • Tyn
  • Tyremith
  • Tyrevoric
  • Tyrey
  • Tyrus
  • Tyruston
  • Tyson
  • Ullian
  • Van
  • Van
  • Van
  • Van
  • Ven
  • Vichrick
  • Vin
  • Vin
  • Vin
  • Wadren
  • Wancisama
  • Wandenike
  • Wanuenry
  • War
  • Wardoniqu
  • Warogaric
  • Wayatt
  • Wayloger
  • Wayson
  • Waytosher
  • Wes
  • Wilivaleo
  • Willesey
  • Win
  • Wis
  • Wis
  • Wyanuel
  • Wyed
  • Wyerbilla
  • Xzan
  • Yan
  • Yaniantha
  • Yanianuel
  • Yon
  • Yon
  • Yoscober
  • Zacheon
  • Zacis
  • Zack
  • Zaian
  • Zaias
  • Zaimon
  • Zan
  • Zavichean
  • Zavismo
  • Zec
  • Zion