Resalte el texto buscado usando Angular js, jQuery y Css

StackOverflow https://stackoverflow.com//questions/11685473

Pregunta

Estoy usando este complemento jquery para buscar texto:"http://code.google.com/p/jquery-highlight/downloads/list "..

Pero no puedo envolver este código en Angular JS, quiero decir "No puedo escribir una directiva para llamar a este enchufe jQuery" ... !!!

Actualizado :

Misma publicación en el grupo de Google:

este es el grupo

¿Fue útil?

Solución

ACTUALIZAR:Este es sólo un ejemplo.Puede modificar según sus necesidades.

No necesitas una comparación de RegExp para eso.Hagamos un uso sencillo de javascript. split() función

1) Defina un estilo para resaltar.

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

2) Su HTML de muestra

<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);
        }

Eso es todo....

Explicación -: split() romperá el targetString de acuerdo con su searchString.Esto es similar a cómo recuperamos valores separados por comas.Lo único es que en este caso tu cadena de búsqueda actúa como una coma :)

Entonces mantén arr[0] como están las cosas.Resalte su cadena de búsqueda y agréguela a arr[0].Adjuntar arr[1] al resultado anterior y así sucesivamente.

Simple....

¿Texto buscado como en el que solo debe resaltar la parte coincidente manteniendo el resto del texto como está?

Otros consejos

Puede usar Resaltado angular-UI Filtro.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top