Textsuche in Javascript?

Ich habe eine Seite mit mehr als 200 Links mit dieser Art der Formatierung.Textsuche in Javascript?

<h1> 
    <a href="somelink">Somelink</a> 
    some text that explain the meaning of the link. 
</h1>

Jetzt, um es leicht zu machen, durch diesen Link zu suchen, habe ich ein Suchfeld gesetzt.

Meine Anforderung besteht darin, alle diese Tags zu durchsuchen und die Links zu finden, die für das Suchfeld relevant sind und den Rest der Verknüpfung ausblenden.

Wie es in Javascript zu tun? (Ich kenne grundlegendes Javascript/jquery Sachen aber wie man Volltextsuche tut?) Ich erforderte nicht sortieren entsprechend relevant, nur filter und zeigen, dass Verstecken gut genug ist.

Quelle

2010-07-18 iamgopal

Sind alle von ihnen in h1 Tags zufällig? –

gibt es mehrere h1 Tags, 200 bis zur letzten Zählung. Ich wollte keine serverseitige Suche nach Geschwindigkeitsgründen, und die kombinierte Größe aller 200 Links überschreitet kaum 10 kb. – iamgopal

Hoffentlich Sie diesen Kommentar hilfreich. Es ist wahrscheinlich nicht das elegante oder effizienteste, aber es lässt Sie mehrere Suchbegriffe eingeben und gibt teilweise Übereinstimmungen (die möglicherweise oder nicht gewünscht werden). Die Art, wie ich es gemacht habe, wenn Sie auf die Suchschaltfläche klicken, wird alle anderen Elemente außer denen ausblenden, die zu Ihren Suchbegriffen passen, aber Sie können dies ändern, um mit den Elementen im Ergebnis-Array zu tun. Ich empfehle nicht, dies genau zu verwenden, aber hoffentlich gibt es Ihnen einen Bezugspunkt, wie Sie Ihre eigenen implementieren möchten (wenn Sie sich für eine andere Lösung als die Schnellsuche entscheiden).

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type='text/javascript' language='javascript' > 
$(document).ready(function() { 
    var links = new Array(); 
    $("h1").each(function(index, element) {   
     links.push({ 
      text: $(this).text(), 
      element: element 
     }); 
    }); 

    $("#searchButton").click(function() { 
     var query = $("#searchBox").val(); 
     var queryTerms = query.split(' '); 

     var results = new Array(); 
     for(var i = 0; i < queryTerms.length; i++) { 
      for(var j = 0; j < links.length; j++) { 
       if (links[j].text.indexOf(queryTerms[i]) > -1) { 
        results.push(links[j].element);      
        } 
      } 
     } 

     $("h1").each(function(index, element) { 
      this.style.display = 'none'; 
     }); 
     for(var i = 0; i < results.length; i++) { 
      results[i].style.display = 'block'; 
     } 

    });  

}); 
</script> 

</head> 
<body> 
<p> 
<input id="searchBox" type="text" /> 
<input type="button" id="searchButton" value="Search" /> 
</p> 

<h1> 
    <a href="somelink">Somelink1</a> 
    asdf 
</h1> 
<h1> 
    <a href="somelink">Somelink2</a> 
    ssss 
</h1> 
<h1> 
    <a href="somelink">Somelink3</a> 
    3333 
</h1> 
<h1> 
    <a href="somelink">Somelink4</a> 
    232323 
</h1> 
<h1> 
    <a href="somelink">Somelink5</a> 
    fffff 
</h1> 

</body> 
</html>

Quelle

2010-07-18 04:51:46

Ich habe einen gefunden.

http://github.com/riklomas/quicksearch

die Regex für die Suche verwendet.

Quelle

2010-07-18 04:27:56 iamgopal

können Sie aufzählen alle h1 Tags innere html erhalten und tun indexOf, oder können Sie jQuery verwenden es eine benutzerdefinierte contains Funktionalität gemacht hat, die die Elemente mit bestimmten Text zurückgibt. Hier

ist ein Beispiel von jQuery docs kopiert

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 

<div>John Resig</div> 

<div>George Martin</div> 
<div>Malcom John Sinclair</div> 
<div>J. Ohn</div> 


<script> 
$("div:contains('John')").css("text-decoration", "underline"); 
    </script> 
</body> 
</html>

Quelle

2010-07-18 04:28:35

Wow, das ist wirklich nett, ich wusste es nicht! – BrunoLM

Also hier arbeite ich an einer Lösung, die das Erstellen eines Arrays und dann das Durchsuchen dieses Arrays für den Text, das macht meine Lösung aufgebläht und zurückgeblieben. +1 für die Einfachheit. –

Wie funktioniert es für mehrere Wörter? (bricht es sie und sucht oder sucht die ganze Zeichenfolge?) – iamgopal

Textsuche in Javascript?

Antwort

Verwandte Themen