Jump to content


kroll

Member Since 24/08/2007
Offline Last Active 17/03/2014, 13:16
-----

Topics I've Started

Problema Com Busca E Highlight Com Jquery

17/03/2014, 12:44

Olá! Encontrei este código para fazer uma simples busca na página e mudar o background da palavra:

  <style type='text/css'>
    .highlighted {
    background-color:yellow;
}
.emptyBlock1000 {
    height:1000px;
}
.emptyBlock2000 {
    height:2000px;
}
  </style>
   <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  
  <script type='text/javascript'>//<![CDATA[ 
$(function(){
function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
        //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
        var selector = selector || "#bodyContainer";                             //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm,"ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if(matches) {
$('.highlighted').removeClass('highlighted');     //Remove old search highlights
                $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>"));
           $('.match:first').addClass('highlighted');
            $('#next').on('click',i=1, function()
        {                                                                   $('.match').removeClass('highlighted');                                                                   $('.match').eq(i).addClass('highlighted');
         if( i >= $('.match').length -1) {
             i=0;
         }
          i=i+1;  
     }); 
   
            
            
            
            if($('.highlighted:first').length) {             //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}
$(document).ready(function() {
    $('#search-button').on("click",function() {
        if(!searchAndHighlight($('#search-term').val())) {
            alert("No results found");
        }
    });
});
});//]]>  

</script>



O problema é que ao invés de adicionar a classe na palavra dentro do link ele adiciona na url, deixando ela quebrada. Tem um link de exemplo aqui. Alguém poderia me ajudar? Obrigado!

IPB Skin By Virteq