8
I wanted a field <input>
on my page on which, if I typed something, I would search for the word I typed inside that section
. I’m not using database after all, no need for it (the data is in HTML). Can I use some plugin, something like that? I’m using Bootstrap.
Follows code from the page:
Itineraries | Urban
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/sl-slide.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link rel="shortcut icon" href="images/ico/bus.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
<!--Header-->
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a id="logo" class="pull-left" href="index.html"></a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li><a href="index.html">Início</a></li>
<li class="active"><a href="itinerarios.html">Itinerários</a></li>
<li><a href="sobre-nos.html">Sobre Nós</a></li>
<li><a href="contato.html">Contato</a></li>
<li><a href="trabalhe-conosco.html">Trabalhe Conosco</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SBE (Bilhetagem) <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li>
<li><a href="blog-item.html">Estudante</a></li>
<li><a href="faq.html">Empresas e Instituições</a></li>
<li><a href="pricing.html">Idosos</a></li>
<li><a href="404.html">Cidadão</a></li>
<li><a href="typography.html">PNE / PNA</a></li>
<li class="divider"></li>
<li><a href="terms.html">FAQ</a></li>
<li><a href="terms.html">Informações</a></li>
</ul>
</li>
<li class="login">
<a data-toggle="modal" href="#loginForm"><i class="icon-lock"></i></a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<!-- /header -->
<section class="title">
<div class="container">
<div class="row-fluid">
<div class="span6">
<h1>Itinerários</h1>
</div>
<div class="span6">
<ul class="breadcrumb pull-right">
<li><a href="index.html">Início</a> <span class="divider">/</span></li>
<li class="active">Itinerários</li>
</ul>
</div>
</div>
</div>
</section>
<!-- / .title -->
<section class="itinerarios">
<div class="container">
<div class="row">
<div class="span4">
<a href="#" >002 - Formosa via Shell</a><br>
<a href="#" >003 - Formosa 4º Etapa</a><br>
<a href="#" >004 - Tesouro</a><br>
<a href="#" >005 - Boa Vista</a><br>
<a href="#" >006 - Paraíso</a><br>
<a href="#" >007 - Fabril via Goiás</a><br>
<a href="#" >008 - Fabril via IAPC</a><br>
<a href="#" >009 - Vila Góis João Luis</a><br>
<a href="#" >010 - Bairro de Lourdes</a><br>
<a href="#" >011 - Tropical</a><br>
<a href="#" >012 - Alexandrina via Presidente</a><br>
<a href="#" >013 - Nova Vila</a><br>
<a href="#" >014 - Progresso</a><br>
<a href="#" >015 - Vila Mariana União</a><br>
<a href="#" >016 - Bandeiras</a><br>
<a href="#" >018 - Industrial Brasil Hyundai</a><br>
<a href="#" >019 - São José via Calixto Abraão</a><br>
<a href="#" >020 - Santa Maria via Brasil Park Shopping</a><br>
<a href="#" >021 - Vivian Parque Calixtópolis</a><br>
<a href="#" >022 - Trilhos Cecrisa via Brasil</a><br>
<a href="#" >023 - Residencial Copacabana</a><br>
<a href="#" >024 - Jardins das Américas via Universitária</a><br>
<a href="#" >025 - Vila Esperança</a><br>
<a href="#" >027 - Santa Isabel via Huana</a><br>
<a href="#" >028 - Recanto do Sol via Universitária</a><br>
<a href="#" >029 - Vila Góis Circular</a><br>
<a href="#" >030 - Hering Depósito via Jundiaí</a><br>
<a href="#" >031 - Arco Verde</a><br>
<a href="#" >032 - Jd. Europa Novo Jundiaí</a><br>
<a href="#" >034 - Rodoviária</a><br>
<a href="#" >035 - Nações Unidas Pq. Primavera</a><br>
<a href="#" >036 - Guabi Porto Seco</a><br>
<a href="#" >037 - Frei Eustáquio</a><br>
<a href="#" >038 - Vila São Vicente</a><br>
<a href="#" >039 - Bom Clima</a><br>
<a href="#" >041 - Parque Pirineus via Universitária</a><br>
<a href="#" >042 - Santo Antônio Summerville via Flor de Liz</a><br>
<a href="#" >043 - Jardim Promissão via Santos Dummont</a><br>
<a href="#" >044 - Jandaia via Presidente</a><br>
<a href="#" >045 - Industrial via Jundiaí</a><br>
</div>
<div class="span4">
<a href="#" >046 - Trilhos via Vivian Parque</a><br>
<a href="#" >047 - Trilhos via Jundiaí</a><br>
<a href="#" >048 - Campos Elíseos via JK</a><br>
<a href="#" >049 - Hering Depósito via Brasil</a><br>
<a href="#" >051 - Jaiara Trilhos via Brasil</a><br>
<a href="#" >053 - Residencial Morumbi / Jibran</a><br>
<a href="#" >054 - Facchini Industrial via Brasil</a><br>
<a href="#" >058 - Parque Iracema via Universitária</a><br>
<a href="#" >060 - Vila União via Mariana</a><br>
<a href="#" >061 - Senhora d'Abadia</a><br>
<a href="#" >062 - Vale das Antas via Res. Araguaia</a><br>
<a href="#" >064 - Recanto do Sol via Brasil</a><br>
<a href="#" >065 - Flamboyant Vila Sul</a><br>
<a href="#" >066 - Ibirapuera</a><br>
<a href="#" >067 - Residencial leblon</a><br>
<a href="#" >069 - Jardim Promissão via Base Áerea</a><br>
<a href="#" >070 - Filostro via Morada Nova</a><br>
<a href="#" >071 - Joanápolis</a><br>
<a href="#" >073 - Ipanema via Jd. Itália</a><br>
<a href="#" >074 - São Carlos</a><br>
<a href="#" >076 - Souzãnia via Interlândia</a><br>
<a href="#" >079 - Trilhos Recanto do Sol</a><br>
<a href="#" >081 - Santa Cecília</a><br>
<a href="#" >082 - Facchini via Brasil</a><br>
<a href="#" >083 - Bairro de Lourdes via JK</a><br>
<a href="#" >084 - Nova Capital via Santa Casa</a><br>
<a href="#" >085 - Jandaia Champion via Presidente</a><br>
<a href="#" >086 - Champion Jandaia via Presidente</a><br>
<a href="#" >087 - Polocentro Res. Giovani Braga</a><br>
<a href="#" >088 - São José via Goiás</a><br>
<a href="#" >089 - Roses Garden</a><br>
<a href="#" >090 - Branápolis via Santa Casa</a><br>
<a href="#" >091 - Las Palmas via Presidente</a><br>
<a href="#" >092 - Alexandrina via Matinha</a><br>
<a href="#" >093 - Recanto do Sol Facchini Trilhos</a><br>
<a href="#" >095 - Facchini via Jundiaí</a><br>
<a href="#" >096 - São Paulo Setor Sul via Fibra</a><br>
<a href="#" >097 - Vivian Parque Facchini Trilhos</a><br>
<a href="#" >098 - Lapa Fabril via Goiás</a><br>
</div>
<div class="span4">
<a href="#" >099 - Polocentro São João</a><br>
<a href="#" >101 - Filostro Champion via Bairro de Lourdes</a><br>
<a href="#" >102 - Fabril Champion via Pedro Ludovico</a><br>
<a href="#" >103 - Champion Filostro via Bairro de Lourdes</a><br>
<a href="#" >105 - Residencial Veneza Parque Pirineus</a><br>
<a href="#" >106 - Filostro Champion via Tesouro</a><br>
<a href="#" >107 - Champion Filostro via Tesouro</a><br>
<a href="#" >108 - Jardim Primavera via Santo Expedito</a><br>
<a href="#" >109 - Jaiara Facchini Trilhos</a><br>
<a href="#" >110 - Trilhos Facchini Jaiara</a><br>
<a href="#" >111 - Jaiara Champion via Brasil</a><br>
<a href="#" >112 - Champion Jaiara via Brasil</a><br>
<a href="#" >113 - Recanto do Sol Champion</a><br>
<a href="#" >114 - Champion Recanto do Sol</a><br>
<a href="#" >115 - Trilhos via Pedro Ludovico</a><br>
<a href="#" >116 - Facchini Trilhos via Pedro Ludovico</a><br>
<a href="#" >117 - UEG Fibra via Brasil</a><br>
<a href="#" >118 - Vale do Sol via Residencial Araguaia</a><br>
<a href="#" >119 - Residencial dos Ipês via Universitária</a><br>
<a href="#" >120 - UEG Fibra via Jundiaí</a><br>
<a href="#" >121 - Parque Iracema / Jardim América</a><br>
<a href="#" >122 - Vivian Parque Paraíso</a><br>
<a href="#" >123 - Facchini Trilhos Recanto do Sol</a><br>
<a href="#" >124 - Champion via Pedro Ludovico</a><br>
<a href="#" >125 - Champion via Jundiaí</a><br>
<a href="#" >127 - Vivian Parque via São Vicente</a><br>
<a href="#" >129 - Itamarati via Tiradentes</a><br>
<a href="#" >131 - Champion Fabril via Pedro Ludovico</a><br>
<a href="#" >132 - Aldeia dos Sonhos via Guanabara</a><br>
<a href="#" >133 - Joanápolis via Jardim Primavera</a><br>
<a href="#" >134 - Residencial Bela Vista Tangará</a><br>
<a href="#" >135 - Jardim Primavera via Filostro</a><br>
<a href="#" >136 - Champion via Brasil</a><br>
<a href="#" >138 - Jardim Peixoto via Promissão</a><br>
<a href="#" >139 - Miranópolis via Aldeia dos Sonhos</a><br>
<a href="#" >140 - Adriana Dom Felipe via Tiradentes</a><br>
<a href="#" >141 - Unievangélica</a><br>
<a href="#" >144 - Industrial via Santa Casa</a><br>
<a href="#" >147 - Champion via Vivian Parque</a><br>
</div>
</div>
</div>
</section>
<!--row-fluids-->
<div class="row-fluid">
<!--Contact Form-->
<div class="span3">
<h4>ENDEREÇO</h4>
<ul class="unstyled address">
<li>
<i class="icon-home"></i><strong>Endereço:</strong>Av. Brasil Norte, 1655<br>Anápolis, GO
</li>
<li>
<i class="icon-envelope"></i>
<strong>E-mail: </strong> [email protected]
</li>
<li>
<i class="icon-phone"></i>
<strong>Telefone:</strong> 0800 029 1900
</li>
</ul>
</div>
<!--End Contact Form-->
<!--Important Links-->
<div id="tweets" class="span3">
<h4>NOSSA EMPRESA</h4>
<div>
<ul class="arrow">
<li><a href="sobre-nos.html">Sobre Nós</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contato</a></li>
<li><a href="trabalhe-conosco.html">Trabalhe Conosco</a></li>
<li><a href="#">Informações</a></li>
</ul>
</div>
</div>
<!--Important Links-->
2015 Urban - Urban Mobility of Anápolis. All rights reserved.
<div class="span6">
<ul class="social pull-right">
<li><a href="#"><i class="icon-facebook"></i></a></li>
</ul>
</div>
<div class="span1">
<a id="gototop" class="gototop pull-right" href="#"><i class="icon-angle-up"></i></a>
</div>
<!--/Goto Top-->
</div>
</div>
Login Enter Forgot your password?
You have several plugins for this, you can search for "autocomplete" example: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=typeahead-with-local-dataset
– Gabriel Rodrigues
Wow. I really liked this one, but for it to complete itself, I would have to put all these lines and numbers in the place of the js script right? Could you give me a few more?
– Adson Henrique