jquery - Search-by-tag results returned on a single line -


i searching text <div> tag. problem when search, <div> data come 1 line.

here fiddle. http://jsfiddle.net/fc4sg/

in fiddle, type break press search. why don't <div> contents keep formatting?

here's code:

var searchindex = -1; var searchtermold ='';  $(document).ready(function(){     $('.searchbox').on('change',function(){         if($(this).val()===''){             var selector = "#realtimecontents";             $(selector+' span.match').each(function(){                 $(this).replacewith($(this).html());             });         }          searchindex = -1;         $('.searchnext').attr("disabled", "disabled");         $('.searchprev').attr("disabled", "disabled");         searchtermold = $(this).val();     });      $('.searchbox').on('keyup',function(){         var selector= "#realtimecontents";         if($(this).val()===''){             $(selector+' span.match').each(function(){                 $(this).replacewith($(this).html());             });         }          if($(this).val() !== searchtermold){             $(selector+' span.match').each(function(){                 $(this).replacewith($(this).html());             });              searchindex = -1;             $('.searchnext').attr("disabled", "disabled");             $('.searchprev').attr("disabled", "disabled");                                       }     });      $('.search').on('click',function(){         if(searchindex == -1){             var searchterm = $('.searchbox').val();             if(searchterm==''){                 pg_alert("please insert text.")                 return;             }              searchandhighlight(searchterm);         }         else             searchnext();          if($('.match').length >1){             $('.searchnext').removeattr("disabled");             $('.searchprev').removeattr("disabled");         }     });      $('.searchnext').on('click',searchnext);     $('.searchprev').on('click',searchprev); });  function searchandhighlight(searchterm) {     if (searchterm) {         var searchtermregex, matches;         var  selector= "#realtimecontents";         $(selector+' span.match').each(function(){             $(this).replacewith($(this).html());         });         try {             searchtermregex = new regexp('('+searchterm+')', "ig");         } catch (e) {             return false;         }          $('.highlighted').removeclass('highlighted');             matches = $(selector).text().match(searchtermregex);              if (matches !==null && matches.length > 0) {                 var txt = $(selector).text().replace(searchtermregex, '<span class="match">$1</span>');                 $(selector).html(txt);                 searchindex++;                 $('.match:first').addclass('highlighted');                  if($('.match').eq(searchindex).offset().top > $(window).height()-10){                     $(document).scrolltop($('.match').eq(searchindex).offset().top);                 }                  return true;             }else{                 pg_alert('search not found.');             }              return false;     }      return false; }  function searchnext(){     searchindex++;     if (searchindex >= $('.match').length)         searchindex = 0;      $('.highlighted').removeclass('highlighted');     $('.match').eq(searchindex).addclass('highlighted');      if($('.match').eq(searchindex).offset().top > $(window).height()-10){         $(document).scrolltop($('.match').eq(searchindex).offset().top);     } }  function searchprev(){     searchindex--;     if (searchindex < 0)         searchindex = $('.match').length - 1;     $('.highlighted').removeclass('highlighted');     $('.match').eq(searchindex).addclass('highlighted');      if($('.match').eq(searchindex).offset().top > $(window).height()-10){         $(document).scrolltop($('.match').eq(searchindex).offset().top);     } }

the problem line:

var txt = $(selector).text().replace(searchtermregex, '<span class="match">$1</span>');

you not preserving html tags part of original text. when retrieve .text(), getting result has of tags removed. fix this, need use html of text instead:

var txt = $(selector).html().replace(searchtermregex, '<span class="match">$1</span>');

Comments

Post a Comment

Popular posts from this blog

php - get table cell data from and place a copy in another table -

two-part question: have 2 tables: 1 table items , other table selected items copied when add button clicked. after, when items wanted selected, there 'finished' button post items selected db. i started javascript didn't far @ because jquery seems better suited i'm not familiar it function addto() { var div = document.getelementbyid('fixeddiv','inside'); div.innerhtml = div.innerhtml + 'item added'; } <div id='fixeddiv'> <table align="center" id="tradee"> <th rowspan="2"> other item</th> <?php while($rowi =$item->fetch_assoc()) {?> <tr> <td> <?php echo $rowi['item_name']; ?> </td> <td><?php echo $rowi['item_description'];?></td> </tr> <?php } ?> </table> <br> <table align="center" id="tradetable"
Read more

javascript - Mootools wait with Fx.Morph start -

i trying var effect = new fx.morph(testmorph, { wait/delay 2 seconds before starting. ( fiddle here ) but when try .wait(2000) or .delay(2000) , or .wait(2000, effect) uncaught typeerror: object [object object] has no method 'delay' any ideas how working? code i'm using: var testmorph = document.id('testmorph'); var effect = new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start({ 'top': 20, 'opacity': 1 }).start({ 'border-color': '#a80025', 'color': '#a80025' }); effect.delay(2000); you can use combination of chain() , delay() achieve desired effect. new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start().chain(function(){ this.start.delay(2000,effect,{ //first }); }).chain(function(){ this.start({ //second }); }); the
Read more

php - Navigate throught databse rows -

i run image hosting site, , ive run problem. want make 2 buttons beside pic "next image" , "prev image". im new php/mysql , haveing troubles. check out got. use id (numbers) find correct row, have image name build next link. how make below query next , prev image names + ids? $query_next = ("select imageid, image_name images image_name = '$image_main' order imageid desc limit 1"); $query_prev = ("select imageid, image_name images image_name = '$image_main' order imageid asc limit 1"); // next $next = mysql_query($query_next); // prev $prev = mysql_query($query_prev); while ($row = mysql_fetch_assoc($next)) { $next = $row['image_name']; } while ($row = mysql_fetch_assoc($prev)) { $prev = $row['image_name']; } the html = > simple stuff. <a href="http://mysite.com/view_image/<?=$next?>">next image</a> <a href="http://mysite.com/view_image/<?=$pr
Read more