Avatar billede herlevsen123 Nybegynder
27. februar 2013 - 21:53 Der er 5 kommentarer og
1 løsning

Jquery søg og highlight

http://jsfiddle.net/rmmBU/

Har lavet denne lille søgefunktion. Man søger på et ord og containeren bliver highlighted hvis ordet findes deri. Man kan også søge på flere ord.

Jeg kunne godt tænke mig at hvis man søgte på 2 ord, så ville den kun give classen "search-successful" hvis begge ord findes i containeren, ikke bare hvis et af dem gør.

Håber der er en der har noget input til hvordan man kringler den (:
Avatar billede niklask Nybegynder
27. februar 2013 - 23:06 #1
Avatar billede olebole Juniormester
27. februar 2013 - 23:23 #2
<ole>

- eller:

$(document).ready(function(){
    $(".search-question-button").click(function () {
        var quest = $('.search-questions-field').val().split(" "),
        rx = new RegExp("(" + quest.join("|") + ")", "gi"),
        len = quest.length, elm, found;
       
        $(".searchin").each(function() {
            elm = $(this);
            elm.removeClass('search-successful');
            found = 0;
            elm.text().replace(rx, function(){
                found++;
            });
            if (found===len) elm.addClass("search-successful");
        });     
    });
});

Hvis du kun har én søgeknap, så brug en id i stedet for en class. Du kan ligeså godt bruge den mest direkte adgang  *o)

/mvh
</bole>
Avatar billede herlevsen123 Nybegynder
28. februar 2013 - 00:23 #3
Gode svar begge to. Jeg går nok med oles løsning, da den lader mig søge på dele af ordet. Men din var bestemt også brugbar niklask (:

Men eftersom jeg ved Ole ikke tager imod point får du dem selvfølgelig Niklas (:

Tak for hjælpen begge!
Avatar billede olebole Juniormester
28. februar 2013 - 03:41 #4
Selvtak  =)

Der er et par forskelle på de to løsninger. Hvis man med #1 søger på "jeg min", vil kun første sætning blive aktiv. Med min bliver både første og anden sætning aktiv.

#1 kræver ordene stående, som de er skrevet. Min kræver blot, at begge ord er til stede. Min håndtere desuden valgfrit antal ord.

Derudover er der det med søgning på dele af ord. Faktisk var det min mening at undgå det, men jeg glemte det alligevel til sidst. Ændrer du RegExp'en til:

rx = new RegExp("\\b(" + quest.join("|") + ")\\b", "gi")

- undgår du søgning på dele af ord, mens resten er urørt ... hvis du på et tidspunkt skulle ønske det  =)

\\b betyder i denne forbindelse 'en ordkant' (word boundary). Det vil sige den fiktive 'ting' mellem et bogstav og et mellemrum, punktum, komma, etc.
Avatar billede olebole Juniormester
28. februar 2013 - 04:13 #5
Du kunne også udvide med to checkbokse:

<div>
    <label>Søg kun på hele ord <input id="wholeWordsOnly" type="checkbox"></label>
</div>
<div>
    <label>Alle ord skal være til stede <input id="allWordsPresent" type="checkbox"></label>
</div>

- og så skrive scriptet sådan:

$(document).ready(function(){
    $(".search-question-button").click(function () {
        var quest = $('.search-questions-field').val().split(" "),
        len = quest.length, elm, found, rx;
       
        $(".searchin").each(function() {
            elm = $(this);
            elm.removeClass('search-successful');
            found = 0;
            rx = $("#wholeWordsOnly").is(":checked")  ?
                    new RegExp("\\b(" + quest.join("|") + ")\\b", "gi") :
                    new RegExp("(" + quest.join("|") + ")", "gi");
            elm.text().replace(rx, function(){
                found++;
            });
            if ($("#allWordsPresent").is(":checked")) {
                if (found===len) elm.addClass("search-successful");
            }
            else if (found>0) elm.addClass("search-successful");
        });     
    });
});
Avatar billede herlevsen123 Nybegynder
28. februar 2013 - 13:57 #6
rx = new RegExp("\\b(" + quest.join("|") + ")", "gi")

Har prøvet at bruge den sådan her, da jeg gerne vil have at den første del af ordet matcher. Vil genre kunne skrive "hop", hvor den også accepter "hoppe".

Men det virker ikke hvis ordet starter med æ, ø eller å. Kan næsten gætte mig til det skal skrives eksplicit at den skal medtage de bogstaver, men hvordan det skrive ind i regex'en kan jeg ikke helt gennemskue? :s

Derudover har jeg tilføjet trim() i quest variablen, for at slette trailing space, der ellers gav problem hvis man kom til at lave et mellemrum efter sidste ord.

var quest = $('.search-questions-field').val().trim().split(" ")

Kan det give problemer?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester