CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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 (:

Synes godt om

niklask Nybegynder

27. februar 2013 - 23:06 #1

http://jsfiddle.net/rmmBU/11/

Synes godt om

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>

Synes godt om

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!

Synes godt om

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.

Synes godt om

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

Synes godt om

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?

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS