jQuery/JS - Zählen Sie Ergebnisse in DIV

Ich bin ziemlich neu mit JS, also gehen Sie einfach.jQuery/JS - Zählen Sie Ergebnisse in DIV

Ich habe ein einfaches Suchformular, das den gesamten BODY durchsucht und den Suchbegriff nach einer Klick-Funktion hervorhebt. Das funktioniert großartig. Ich möchte jedoch die Funktion hinzufügen, um die Anzahl der gefundenen Ergebnisse zurückzugeben (zusätzlich zur In-Place-Highlight-Funktion). BEARBEITEN: Die Ergebnisse werden auch nicht auf der Seite angezeigt, sie werden nur vom Design des JS-Skripts hervorgehoben. Also, im Wesentlichen brauche ich nur eine Möglichkeit, die Anzahl der Ergebnisse anzuzeigen, die nach der Suche hervorgehoben sind.

Alles, was ich finden konnte, war, wie man das mit Daten macht, die in einer Tabelle sind. Meine Daten befinden sich jedoch NICHT in einer Tabelle.

Auch dies kann nicht eine "live" Suche sein, ich brauche es nur zu schießen, nachdem das Click-Ereignis ausgelöst wurde.

Diese nächstgelegene Lösung, die ich finden konnte, war HERE, aber dies ist eine Live-Suche in einer Tabelle.

Hier ist meine Form so weit:

$('document').ready(function() { 
 

 
    $('#button').click(function() { 
 
    var searchbox = document.querySelector('#text-search'); 
 
    var searchForm = document.querySelector('#search'); 
 
    }); 
 
}); 
 

 

 
function highlight() { 
 
    var text = document.getElementById("text-search").value; 
 
    var query = new RegExp("(\\b" + text + "\\b)", "gim"); 
 
    var e = document.getElementById("body").innerHTML; 
 
    var enew = e.replace(/(<span>|<\/span>)/igm, ""); 
 
    document.getElementById("body").innerHTML = enew; 
 
    var newe = enew.replace(query, "<span>$1</span>"); 
 
    document.getElementById("body").innerHTML = newe; 
 
    color = "#f6f"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 
<body> 
 

 

 
    <div id="search" class="Column"> 
 
    <form id="searchForm" method="post" action="" onsubmit="highlight(); return false;"> 
 
     <input name="text-search" id="text-search" type="text" value="" class="input" placeholder="search & highlight"> 
 
     <input id="submit" type="submit" value="Submit" class="button" /> 
 
    </form> 
 
    <div class="count">search results: </div> 
 
    </div> 
 

 
    <div class="slide"> 
 
    <div class="expand"> 
 
     data 
 
    </div> 
 
    </div> 
 

 
</body>

UPDATE:

Ich fand fast eine Lösung dank einer JS-Assistenten, der mich mit einem anderen Problem wurde zu helfen. Der folgende Code zählt also die Anzahl der Ergebnisse, fügt jedoch +1 für jeden DIV auf der Seite hinzu, auch wenn der gesuchte Begriff in diesem DIV nicht existiert. Also, wenn mein Körper wie das Beispiel unten sah und ich suchte TEST, wäre das Ergebnis 5 (2 Suchbegriffe + 3 DIVs)

Körper:

<div1> 
    test 
</div> 
<div2> 
    test 
</div> 
<div3> 
    hai 
</div>

JS:

function count() { 
    var count = 
    $("#body span").length; 
    $(".count").text(count); 
};

Also, wie kann ich die Anzahl der DIVs anpassen?

https://jsfiddle.net/seanvree/mqyxqfgu/

Quelle

2017-12-08 Sean Vreeland

einige Suche html Teil hinzufügen zu Ihrer Geige Link. so dass wir überprüfen können, wie es hervorgehoben ist –

@ AlivetoDie - Anantsingh Ja, ich versuche, das zu tun, aber es gibt mir einen seltsamen Fehler, Es funktioniert auf meiner Website, aber aus irgendeinem Grund nicht in der Jiddle. –

@SeanVreeland JSFiddle hat aus irgendeinem Grund ein Problem mit dem 'POST'. Wenn Sie Ihren Code stattdessen in ein Stack Overflow-Snippet kopieren, funktioniert es. (Stellen Sie sicher, dass Sie jQuery hinzufügen.) – freginold

Antwort:

function count() { 
    var count = 
     $("#body span").length; 
    $(".count").text(count); 
    $('.count').append(" occurance(s) of searched term"); 
};

Quelle

2017-12-16 21:12:30

Ihr Code scheint die Spiele in einer Spanne zu wickeln. Sie könnten eine Klasse wie „Match“, und zählen Sie die Spannweiten mit Klasse Spiel So etwas hinzufügen:

var matches= $('span.match').length;

Quelle

2017-12-08 14:02:02

jQuery/JS - Zählen Sie Ergebnisse in DIV

Antwort

Verwandte Themen