High light the searched text using Angular js , jQuery and Css

Question

Im using this jquery plugin for searching text :"http://code.google.com/p/jquery-highlight/downloads/list "..

But im not able to wrap this code in angular js , I mean to say "i'm unable to write a directive to call this jquery plug in"...!!!

Updated :

Same post in Google group:

This is the group

Your question is very very vague. Be more specific, provide some sample code — Jibi Abraham
– Jibi Abraham, Commented Jul 27, 2012 at 10:00

AdityaParab · Accepted Answer · 2012-07-27 11:49:29Z

2

UPDATE: This is just an example. You can modify as per your needs.

You don't need RegExp comparison for that. Lets make simple use of javascript's split() function

1) Define a style for highlighting.

.srchslctn{
    background-color: yellowgreen;
    color: red;
}

2) Your sample HTML

<body>
    <div>
        <div id="serach-Paragraph">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
        </div>
        <input type="button" id="h" value="Highlight"/>
        <div id="target"></div>
    </div>
</body>

3) JavaScript

            $(document).ready(function(){
            $("#h").on('click',function(){
                highlight(); 
            });
        });

        function highlight(){
            $("#target").empty();
            var mainString = $("#serach-Paragraph").html();
            var searchString = "ipsum";
            var arr = mainString.split(searchString);
            var len = arr.length;
            var finalString="";
            for(var i=0;i<arr.length;i++){

                finalString+=arr[i];

                if(i<len-1){
                    finalString+='<span class="srchslctn">'+searchString+'</span>';
                }
            }
            $("#target").html(finalString);
        }

Thats it....

Explanation -: split() will break the targetString according to your searchString. This is similar to how we retrieve comma separated values. Only thing is in this case your search string acts like comma :)

Then keep arr[0] as it is. Highlight your search string and append it to arr[0]. Append arr[1] to above result and so on.

Simple....

Searched text as in you have to only highlight the matched part keeping rest of the text as it is?

edited Jul 27, 2012 at 11:49

answered Jul 27, 2012 at 10:04

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

praveenpds Over a year ago

Im using this jquery plugin for searching text "code.google.com/p/jquery-highlight/downloads/list "..But im not able to wrap this code in angular js , I mean to say "i'm unable to write a directive to call this jquery plug in"

praveenpds Over a year ago

Same post in Google group:Very active group "groups.google.com/forum/#!topicsearchin/angular/…"

alisabzevari · Accepted Answer · 2014-01-13 09:48:03Z

0

You can use Angular-UI Highlight filter.

answered Jan 13, 2014 at 9:48

alisabzevari

8,1668 gold badges47 silver badges69 bronze badges

Collectives™ on Stack Overflow

High light the searched text using Angular js , jQuery and Css

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related