Search within html - no database

Asked

Viewed 670 times

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

  • 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?

2 answers

6


If you know which element to search in you can search the text typed by the user comparing it with the texts of these elements within the section, example:

$(document).ready(function(){
    /*
     Ao pressionar uma tecla no campo de busca
     OBS:Se desejar pode colocar um botão de ação e mudar para onclick neste botão
    */
	$('#buscar').on('keyup',function(){
  	    //pegar o valor do input e transformar em minúscula
  	    var texto = $('#buscar').val().toLowerCase();
         		
        //seleciona todos os elementos a dentro da section
        var a = $(this).parents('section').find('a');
		$.each(a,function(){//percorre os elementos
    	    //texto do elemento também em letra minúscula
    	    var aTexto = $(this).text().toLowerCase();
            //se encontrar o valor procurado no texto do elemento
    	    if(aTexto.indexOf(texto) > -1){
      	      $(this).show(); //exibe
            } else {
      	      $(this).hide(); //oculta
            }
      
        });
  });
});
section.itinerarios a{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section class="itinerarios">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <input type="text" id="buscar" class="form-control" placeholder="Pesquisar"/>   
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <a href="#" >002 - Formosa via Shell</a>
        <a href="#" >003 - Formosa 4º Etapa</a>
        <a href="#" >004 - Tesouro</a>
        <a href="#" >005 - Boa Vista</a>
        <a href="#" >006 - Paraíso</a>
        <a href="#" >007 - Fabril via Goiás</a>
        <a href="#" >008 - Fabril via IAPC</a>
        <a href="#" >009 - Vila Góis João Luis</a>
        <a href="#" >010 - Bairro de Lourdes</a>
        <a href="#" >011 - Tropical</a>
        <a href="#" >012 - Alexandrina via Presidente</a>
        <a href="#" >013 - Nova Vila</a>
        <a href="#" >014 - Progresso</a>
        <a href="#" >015 - Vila Mariana União</a>
        <a href="#" >016 - Bandeiras</a>
        <a href="#" >018 - Industrial Brasil Hyundai</a>
        <a href="#" >019 - São José via Calixto Abraão</a>                        
      </div><!--/.span4-->       
    </div><!--/.row-->
 </div><!--/.container-->
</section><!--/.itinerarios-->

A tip: Try to remove tags <br> of your code and put display:block in the CSS, as in the example, to put the elements found at the top of the list.

  • The point is I can’t do these . js scripts, work on my code, as if some other . js were interfering.

  • @Adsonhenrique you checked in the browser console if it generates an error? Try to debug code by parts, for example, first see if the script is loading put a alert after the $(document).ready(function(){ alert('carregou')..., if yes test the $('#buscar').on('keyup',function(){alert('keyup')... and so on.

  • Right @abfurlan - I thank you from my heart. It helped me a lot, I managed to solve the problem, and this code. js you taught me, is exactly what I want. Finally it’s working, the way I’d like it to be. I thank you from my heart for having been patient with me.

  • @Adsonhenrique ok I’m happy to help, if the answer answered your question mark it as accepted, so other people with the same doubt will know that the answer also serves for them.

5

has some plugins for autocomplate, but perhaps the HTML datalist itself will be enough for you:

var inputs = document.querySelectorAll("[list]");
var onListChange = function (event) {  
  var self = event.currentTarget;  
  var option = self.list.querySelector("option[value='" + self.value + "']");
  var hidden = document.getElementById(self.dataset.hidden);
  
  hidden.value = option ? option.dataset.value : null;  
  if (hidden.value) {
    var myEvent = new CustomEvent("valueSelected", { detail: hidden.value });
    self.dispatchEvent(myEvent);
  }
};

[].forEach.call(inputs, function (input, indice) {
  input.addEventListener("input", onListChange);      
});

var busca = document.getElementById("busca");
busca.addEventListener("valueSelected", function (event) {
  alert(event.detail);
});
<label>
  Busca:
  <input id="busca" type="text" list="opcoes" data-hidden="opcao" />
  <input id="opcao" type="hidden" />
</label>
<datalist id="opcoes">
  <option data-value="#page002.html" value="Formosa via Shell"></option>
  <option data-value="#page003.html" value="Formosa 4º Etapa"></option>
  <option data-value="#page004.html" value="Tesouro"></option>
  <option data-value="#page005.html" value="Boa Vista"></option>
  <option data-value="#page006.html" value="Paraíso"></option>
  <option data-value="#page007.html" value="Fabril via Goiás"></option>
  <option data-value="#page008.html" value="Fabril via IAPC"></option>
  <option data-value="#page009.html" value="Vila Góis João Luis"></option>
  <option data-value="#page010.html" value="Bairro de Lourdes"></option>
  <option data-value="#page011.html" value="Tropical"></option>
  <option data-value="#page012.html" value="Alexandrina via Presidente"></option>
  <option data-value="#page013.html" value="Nova Vila"></option>
  <option data-value="#page014.html" value="Progresso"></option>
  <option data-value="#page015.html" value="Vila Mariana União"></option>
  <option data-value="#page016.html" value="Bandeiras"></option>
  <option data-value="#page018.html" value="Industrial Brasil Hyundai"></option>
  <option data-value="#page019.html" value="São José via Calixto Abraão"></option>
  <option data-value="#page020.html" value="Santa Maria via Brasil Park Shopping"></option>
  <option data-value="#page021.html" value="Vivian Parque Calixtópolis"></option>
  <option data-value="#page022.html" value="Trilhos Cecrisa via Brasil"></option>
  <option data-value="#page023.html" value="Residencial Copacabana"></option>
  <option data-value="#page024.html" value="Jardins das Américas via Universitária"></option>
  <option data-value="#page025.html" value="Vila Esperança"></option>
  <option data-value="#page027.html" value="Santa Isabel via Huana"></option>
  <option data-value="#page028.html" value="Recanto do Sol via Universitária"></option>
  <option data-value="#page029.html" value="Vila Góis Circular"></option>
  <option data-value="#page030.html" value="Hering Depósito via Jundiaí"></option>
  <option data-value="#page031.html" value="Arco Verde"></option>
  <option data-value="#page032.html" value="Jd. Europa Novo Jundiaí"></option>
  <option data-value="#page034.html" value="Rodoviária"></option>
  <option data-value="#page035.html" value="Nações Unidas Pq. Primavera"></option>
  <option data-value="#page036.html" value="Guabi Porto Seco"></option>
  <option data-value="#page037.html" value="Frei Eustáquio"></option>
  <option data-value="#page038.html" value="Vila São Vicente"></option>
  <option data-value="#page039.html" value="Bom Clima"></option>
  <option data-value="#page041.html" value="Parque Pirineus via Universitária"></option>
  <option data-value="#page042.html" value="Santo Antônio Summerville via Flor de Liz"></option>
  <option data-value="#page043.html" value="Jardim Promissão via Santos Dummont"></option>
  <option data-value="#page044.html" value="Jandaia via Presidente"></option>
  <option data-value="#page045.html" value="Industrial via Jundiaí"></option>
  <option data-value="#page046.html" value="Trilhos via Vivian Parque"></option>
  <option data-value="#page047.html" value="Trilhos via Jundiaí"></option>
  <option data-value="#page048.html" value="Campos Elíseos via JK"></option>
  <option data-value="#page049.html" value="Hering Depósito via Brasil"></option>
  <option data-value="#page051.html" value="Jaiara Trilhos via Brasil"></option>
  <option data-value="#page053.html" value="Residencial Morumbi / Jibran"></option>
  <option data-value="#page054.html" value="Facchini Industrial via Brasil"></option>
  <option data-value="#page058.html" value="Parque Iracema via Universitária"></option>
  <option data-value="#page060.html" value="Vila União via Mariana"></option>
  <option data-value="#page061.html" value="Senhora d'Abadia"></option>
  <option data-value="#page062.html" value="Vale das Antas via Res. Araguaia"></option>
  <option data-value="#page064.html" value="Recanto do Sol via Brasil"></option>
  <option data-value="#page065.html" value="Flamboyant Vila Sul"></option>
  <option data-value="#page066.html" value="Ibirapuera"></option>
  <option data-value="#page067.html" value="Residencial leblon"></option>
  <option data-value="#page069.html" value="Jardim Promissão via Base Áerea"></option>
  <option data-value="#page070.html" value="Filostro via Morada Nova"></option>
  <option data-value="#page071.html" value="Joanápolis"></option>
  <option data-value="#page073.html" value="Ipanema via Jd. Itália"></option>
  <option data-value="#page074.html" value="São Carlos"></option>
  <option data-value="#page076.html" value="Souzãnia via Interlândia"></option>
  <option data-value="#page079.html" value="Trilhos Recanto do Sol"></option>
  <option data-value="#page081.html" value="Santa Cecília"></option>
  <option data-value="#page082.html" value="Facchini via Brasil"></option>
  <option data-value="#page083.html" value="Bairro de Lourdes via JK"></option>
  <option data-value="#page084.html" value="Nova Capital via Santa Casa"></option>
  <option data-value="#page085.html" value="Jandaia Champion via Presidente"></option>
  <option data-value="#page086.html" value="Champion Jandaia via Presidente"></option>
  <option data-value="#page087.html" value="Polocentro Res. Giovani Braga"></option>
  <option data-value="#page088.html" value="São José via Goiás"></option>
  <option data-value="#page089.html" value="Roses Garden"></option>
  <option data-value="#page090.html" value="Branápolis via Santa Casa"></option>
  <option data-value="#page091.html" value="Las Palmas via Presidente"></option>
  <option data-value="#page092.html" value="Alexandrina via Matinha"></option>
  <option data-value="#page093.html" value="Recanto do Sol Facchini Trilhos"></option>
  <option data-value="#page095.html" value="Facchini via Jundiaí"></option>
  <option data-value="#page096.html" value="São Paulo Setor Sul via Fibra"></option>
  <option data-value="#page097.html" value="Vivian Parque Facchini Trilhos"></option>
  <option data-value="#page098.html" value="Lapa Fabril via Goiás"></option>
  <option data-value="#page099.html" value="Polocentro São João"></option>
  <option data-value="#page101.html" value="Filostro Champion via Bairro de Lourdes"></option>
  <option data-value="#page102.html" value="Fabril Champion via Pedro Ludovico"></option>
  <option data-value="#page103.html" value="Champion Filostro via Bairro de Lourdes"></option>
  <option data-value="#page105.html" value="Residencial Veneza Parque Pirineus"></option>
  <option data-value="#page106.html" value="Filostro Champion via Tesouro"></option>
  <option data-value="#page107.html" value="Champion Filostro via Tesouro"></option>
  <option data-value="#page108.html" value="Jardim Primavera via Santo Expedito"></option>
  <option data-value="#page109.html" value="Jaiara Facchini Trilhos"></option>
  <option data-value="#page110.html" value="Trilhos Facchini Jaiara"></option>
  <option data-value="#page111.html" value="Jaiara Champion via Brasil"></option>
  <option data-value="#page112.html" value="Champion Jaiara via Brasil"></option>
  <option data-value="#page113.html" value="Recanto do Sol Champion"></option>
  <option data-value="#page114.html" value="Champion Recanto do Sol"></option>
  <option data-value="#page115.html" value="Trilhos via Pedro Ludovico"></option>
  <option data-value="#page116.html" value="Facchini Trilhos via Pedro Ludovico"></option>
  <option data-value="#page117.html" value="UEG Fibra via Brasil"></option>
  <option data-value="#page118.html" value="Vale do Sol via Residencial Araguaia"></option>
  <option data-value="#page119.html" value="Residencial dos Ipês via Universitária"></option>
  <option data-value="#page120.html" value="UEG Fibra via Jundiaí"></option>
  <option data-value="#page121.html" value="Parque Iracema / Jardim América"></option>
  <option data-value="#page122.html" value="Vivian Parque Paraíso"></option>
  <option data-value="#page123.html" value="Facchini Trilhos Recanto do Sol"></option>
  <option data-value="#page124.html" value="Champion via Pedro Ludovico"></option>
  <option data-value="#page125.html" value="Champion via Jundiaí"></option>
  <option data-value="#page127.html" value="Vivian Parque via São Vicente"></option>
  <option data-value="#page129.html" value="Itamarati via Tiradentes"></option>
  <option data-value="#page131.html" value="Champion Fabril via Pedro Ludovico"></option>
  <option data-value="#page132.html" value="Aldeia dos Sonhos via Guanabara"></option>
  <option data-value="#page133.html" value="Joanápolis via Jardim Primavera"></option>
  <option data-value="#page134.html" value="Residencial Bela Vista Tangará"></option>
  <option data-value="#page135.html" value="Jardim Primavera via Filostro"></option>
  <option data-value="#page136.html" value="Champion via Brasil"></option>
  <option data-value="#page138.html" value="Jardim Peixoto via Promissão"></option>
  <option data-value="#page139.html" value="Miranópolis via Aldeia dos Sonhos"></option>
  <option data-value="#page140.html" value="Adriana Dom Felipe via Tiradentes"></option>
  <option data-value="#page141.html" value="Unievangélica"></option>
  <option data-value="#page144.html" value="Industrial via Santa Casa"></option>
  <option data-value="#page147.html" value="Champion via Vivian Parque"></option>
</datalist>

  • Right. Both plugins are excellent, never imagined that could have something like this (sorry my ignorance). However, in this case all the items in this list are referentiable (link). So I figured for my case, I’d have to have a "Research" button. that when he clicks, directs him to another tab, with the result of what he researched, then he can click on the content that he researched and then be redirected. Basically, the guy would search "Nook of the Sun", click on search, go to another page, there would appear the options for him, he would choose and be redirected

  • you can put a data-custom in his datalist, in case I put your link on data-value... note that when selecting a value, I am giving an Alert on the link, at this point you can make a redirect.

  • Forgive my ignorance, but could you show me how it would look?

  • It’s because in my code itself, it doesn’t even show Alert when I select a line. It only happens here, on the site, when I run. I posted my full code.

  • I will try to do something that takes advantage of your current HTML.

  • I’ll be very grateful to Tobymosque. From my heart!

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.