CODEWITHSUNDEEP
javascriptjquery
Jitender
Jitender

Reputation: 7969

Highlight search text after , in Li

When I use , in search input then , and text after comma is not getting selected. This is because I am using .split method. I have data in below format. I have to display first line in strong tag. so that I have split it out using , separator. 

<li><strong>my name is amit</strong>, address</li>
<li><strong>my name is geeta</strong>, address</li>
<li><strong>my name is xyz</strong>, address</li>


$(this).html(function(val,html){                    
return "<strong>"+txt.split(',')[0]+"</strong>," + txt.split(',')[1]
});

My .replace method is working fine. The following code giving value like

txt = txt.replace(nn, "<span class='highlight'>" + '$1' + "</span>");

if I type "My name is amit, add" then output reproduced by code is

<span class='highlight'>My name is amit, add</span>ress

I know the problem but how to fix it.

fiddle

Upvotes: 1

Views: 1275

Answers (2)

Jitender
Jitender

Reputation: 7969

I split out it again as @Alexander Ravikovich suggested and its finally work for me. here is fiddle

 if ($('.highlight', this).text().indexOf(',') != -1) {
    var x = $('.highlight', this).text().split(',');
    $(this).html("<strong><span class='highlight'>" + x[0] + "</span></strong><span class='highlight'>," + x[1] + "</span>" + $.trim($(this).text()).substr(val.length, $.trim($(this)).length))
} else {
    $(this).html(function() {
        return "<strong>" + txt.split(',')[0] + "</strong>," + txt.split(',')[1];
    });
}


$('.inp').keyup(function(){
        var val=this.value          
        $('ul li').each(function(){
          var e = '(^| )' + val;           
           var l = $(this).text() 
            var a = new RegExp(e, "i");            
            if(!a.test(l)){
                $(this).hide();
            }
            else{
                $(this).show();                
            var reg = new RegExp('\\b(' + val + ')', 'gi'),            
            txt = $(this).text();                            
             if (val.replace(/\s/g, '') == '') {
                txt = txt.replace(new RegExp("<span class='highlight'>([\s\S]*?)</span>"),'$1');
                $(this).html(function(){
                    return "<strong>"+txt.split(',')[0]+"</strong>,"+ txt.split(',')[1]
                });
            }
            else{
            txt = txt.replace(reg, "<span class='highlight'>" + '$1' + "</span>");            
                $(this).html(txt);
                if($('.highlight',this).text().indexOf(',')!=-1){
                    var x=$('.highlight',this).text().split(',');                
                $(this).html("<strong><span class='highlight'>"+x[0]+"</span></strong><span class='highlight'>,"+x[1]+"</span>"+$.trim($(this).text()).substr(val.length,$.trim($(this)).length))
                }
                else{
                    $(this).html(function(){
                        return "<strong>"+txt.split(',')[0]+"</strong>," + txt.split(',')[1];
                    });
                }
            }

            }
        })
    })
.highlight{color:#ff0000}

input{width:300px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input class="inp" />

<ul>
<li><strong>my name is amit</strong>, address</li>
<li><strong>my name is geeta</strong>, address</li>
<li><strong>my name is xyz</strong>, address</li>
</ul>

Upvotes: 0

Robin
Robin

Reputation: 1261

It seems to be a quirk with span, .html() moves the closing span tag inside the closing strong tag, since it was opened inside the strong tag.

If you change it to use div with display: inline-block, as seen in this jsfiddle, it works.

txt = txt.replace(nn, "<div class='highlight'>" + '$1' + "</div>");

which produces a result like

Partial highlight

Where the text after "," is not bold, but all the matched text is highlighted.

Upvotes: 1

Related Questions