I would like to search no matter the title accent

Asked

Viewed 33 times

1

<div class="divBusca">
                  <input class="txtBusca" type="text" name="Tópicos"
                  id="txtBusca" placeholder="Buscar por item..."/>
                  <br><br><br>
          </div>
          <br>
        <ul id="ulItens">
         <li class="pushy-link"><a href=""> Agenda </a></li>

                 <li class="pushy-submenu">
                    <button> Relatórios </button>
                    <ul>
                        <li class="pushy-link"><a href=""> Relatório </a></li>
                        <li class="pushy-link"><a href=""> Relatório comparação </a></li>
                        <li class="pushy-link"><a href=""> Relatório de pedidos </a></li>
                        <li class="pushy-link"><a href=""> Relatório grafico pico vendas </a></li>
                        <li class="pushy-link"><a href=""> Relatório grafico pico por qtd </a></li>
                    </ul>
                  </li>

                  <li class="pushy-submenu">
                    <button> eCommerce </button>
                    <ul>
                        <li class="pushy-link"><a href=""> Todos Pedidos </a></li>
                        <li class="pushy-link"><a href=""> Total itens </a></li>
                        <li class="pushy-link"><a href=""> Importar</a></li> 
                        <li class="pushy-link"><a href=""> Importar manual </a></li> 
                        <li class="pushy-link"><a href=""> Faturamento </a></li> 
                    </ul>
                  </li>
        </ul>

I would like to search for "Report" and appear the "Report". It should be extremely simple but I am not knowing fit the code.

<script type="text/javascript">

            $(function()
            {
                $("#txtBusca").keyup(function()
                {
                    var texto = $(this).val().toLowerCase();
                    $("#ulItens li").css({"display":"block"}).addClass("pushy-submenu-open");

                    if($(this).text().toLowerCase().indexOf(texto) == 0)
                    {

                        $("#ulItens li").removeClass("pushy-submenu-open");

                    }

                    $("#ulItens li").each(function()
                    {
                        if($(this).text().toLowerCase().indexOf(texto) < 0)
                        {
                            $(this).css({"display":"none"});

                        }

                    });
                });
            });

        </script>
javascript html

  • If you remove the accent from all words in the list and then search for Report you can ;)

  • 1

    Related: https://answall.com/a/148229/3774

  • For me it would not solve because the menu necessarily has to have the accentuation

  • Use regular expressions to remove accentuated and special characters from the two strings before comparing them (play the value for distinct variables in order not to remove their original content). - Good example: https://answall.com/a/3995/58027

1 answer

1


Use a function (function tiraAcentos below) which returns the string without the accents (as well as already converts to lowercase). Use the function both in the field value and in the string to be searched:

$(function(){
               
   function tiraAcentos(i){
      
      i = i.toLowerCase().trim();
   
      var acentos = "ãáàâäéèêëíìîïõóòôöúùûüç",
      sem_acentos = "aaaaaeeeeiiiiooooouuuuc";
      
      for(var x=0; x<i.length; x++){
         var str_pos = acentos.indexOf(i.substr(x,1));
         if(~str_pos) i = i.replace(acentos.charAt(str_pos),sem_acentos.charAt(str_pos));
      }
      
      return i;
   }

   $("#txtBusca").keyup(function(){
      var texto = tiraAcentos($(this).val());
      $("#ulItens li").css({"display":"block"}).addClass("pushy-submenu-open");
      if(tiraAcentos($(this).text()).indexOf(texto) == 0){
         $("#ulItens li").removeClass("pushy-submenu-open");
      }
   
      $("#ulItens li").each(function(){
         if(tiraAcentos($(this).text()).indexOf(texto) < 0){
            $(this).css({"display":"none"});
         }
   
      });
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divBusca">
   <input class="txtBusca" type="text" name="Tópicos" id="txtBusca" placeholder="Buscar por item..."/>
   <br><br><br>
</div>
<br>
<ul id="ulItens">
   <li class="pushy-link"><a href=""> Agenda </a></li>

   <li class="pushy-submenu">
      <button> Relatórios </button>
      <ul>
         <li class="pushy-link"><a href=""> Relatório </a></li>
         <li class="pushy-link"><a href=""> Relatório comparação </a></li>
         <li class="pushy-link"><a href=""> Relatório de pedidos </a></li>
         <li class="pushy-link"><a href=""> Relatório grafico pico vendas </a></li>
         <li class="pushy-link"><a href=""> Relatório grafico pico por qtd </a></li>
      </ul>
   </li>

   <li class="pushy-submenu">
      <button> eCommerce </button>
      <ul>
         <li class="pushy-link"><a href=""> Todos Pedidos </a></li>
         <li class="pushy-link"><a href=""> Total itens </a></li>
         <li class="pushy-link"><a href=""> Importar</a></li> 
         <li class="pushy-link"><a href=""> Importar manual </a></li> 
         <li class="pushy-link"><a href=""> Faturamento </a></li> 
      </ul>
   </li>
</ul>

Browser other questions tagged javascript html

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