✔ Suchfunktion mit Voranzeige der Anzahl an Ergebnissen

son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich moechte gerne eine Suchmaske bauen und die soll bevor man auf "suchen" klickt die moegliche anzahl an ergebnisse zeigen.

Beispiel, man schreibt in die Suchmaske das man Leute sucht von 20 - 30 Jahre Alter und waehlt noch ein bis zwei andere Optionen aus und dann steht irgendwo in der naehe der Suchmaske "Ergebnisse 20" damit man weis wieviel Suchergebnisse bei der Eingabe vorhanden sind und wenn man etwas Aendert in der Sucheingabe veraendert sich auch die Anzahl an Ergebnissen.

Erst wenn man dann auf "suchen" klickt werden die ganzen Ergebnisse gezeigt.

Wie baut man sowas, ich denke da muss man Javascript benutzen um zeitgleich vor anklicken des "Suchen Knopfes" eine Abfrage zur Mysql Datenbank machen zu koennen oder geht das auch ohne Javascript?

Wenn sowas nur mit Javascript geht kann mir jemand einige Begriffe sagen wonach ich suchen muss oder vieleicht ein Tutorial empfehlen?
 
Ich denke, daß du in einer Datenbank suchen willst. Im Normalfall würdest du das ausgefüllte Formular vermutlich an die selbe Seite senden und dann die Suche über PHP und SQL durchführen.

Diese Suche must du nun in eine separate Datei auslagern. Parallel dazu mußt du das Formular mit Javascript überwachen und Eingaben über Textfelder oder Checkboxen abfangen und an das Suchscript senden. Am einfachsten geht das über jQuery. Such mal nach "jQuery live suche", da solltest du fündig werden. Tutorials laufen fast immer über die Textsuche a la Google, aber das auf andere Elemente umzubauen sollte kein Problem sein. Bei Texteingaben solltest du vielleicht eine Verzögerung oder eine Mindestanzahl von Buchstaben einbauen. Die Suche nach einzelnen Buchstaben macht keinen Sinn.
 
Ich habe jetzt eine Loesung gefunden mit der ich eine Variable an eine PHP Datei senden kann und in der PHP Datei wird eine Abfrage gemacht, mit PHP bin ich schon etwas vertraut und kann damit umgehen, aber ich weis im Moment noch nicht wie ich es hinbekomme mehrere Variablen an die PHP Datei zu senden fuer die Abfrage, im Moment sieht mein Code folgendemassen aus:

HTML: 
<html>
<head>
<script>
function showHint(str)
{
//---  
   if (str.length == 0)
    {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
else
{

  if (window.XMLHttpRequest)
  {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  
        xmlhttp.onreadystatechange = function()
            {
          
              if (this.readyState == 4 && this.status == 200)
               {
                  document.getElementById("txtHint").innerHTML = this.responseText;
               }
            };
        xmlhttp.open("GET", "test.php?search=" + str, true);
        xmlhttp.send();
}
  
//---
 }
</script>
</head>
<body>

<p><b>Starten Sie eine Suchanfrage:</b></p>
<form>
Alter von: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Anzahl Ergebnisse: <span id="txtHint"></span></p>


</body>
</html>


Ich wuerde jetzt gerne noch ein zweites Eingabefeld in das Formular einbauen wo man das "Alter Bis" eintragen kann und dann sollte die PHP Datei diese beiden Parameter bekommen. Da ich mich mit Javascript jetzt nicht gut genug auskenne weis ich nicht wie ich das einbaue.
 
Du gehst da direkt mit Javascript ran. Das ist zwar möglich, aber viel zu kompliziert. Das geht viel einfacher mit jQuery.

Das hier nutze ich z.B. für eine live Artikelsuche. Hab es jetzt nur auf zwei Felder erweitert.
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $("#formular").keyup(function(){
                var t1 = $('#t1').val();
                var t2 = $('#t2').val();
                if(t1.length > 2){
                    $.ajax({
                        type: "POST",
                        url: "suche.php",
                        data: $("#formular").serialize(),
                        cache: false,
                        success: function(html){
                            $("#result").html(html).show();
                        }
                    });
                }return false;
            });
        });
    </script>
</head>
<body>
    <form id="formular">
        <input type="text" id="t1" /><br>
        <input type="text" id="t2" /><br>
    </form>
    <div id="result"></div>
</body>
Durch keyup auf die Formular ID werden gleich alle darin liegenden Elemente überwacht. Über serialize werden alle Elemente dann an das PHP Script übertragen. Die Antwort als html String wird im result div angezeigt.

Viel Erfolg beim anpassen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück