1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Suchfunktion mit Voranzeige der Anzahl an Ergebnissen

Dieses Thema im Forum "Coders Talk" wurde erstellt von son gohan, 10. November 2016.

  1. son gohan

    son gohan Eingeschränktes 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?
     
  2. Sprint

    Sprint Erfahrenes Mitglied

    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.
     
  3. son gohan

    son gohan Eingeschränktes Mitglied

    Danke fuer den Tipp
     
  4. son gohan

    son gohan Eingeschränktes Mitglied

    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:
    1. function showHint(str)
    2. {
    3. //---  
    4.    if (str.length == 0)
    5.     {
    6.         document.getElementById("txtHint").innerHTML = "";
    7.         return;
    8.     }
    9. else
    10. {
    11.  
    12.   if (window.XMLHttpRequest)
    13.   {
    14.     // code for IE7+, Firefox, Chrome, Opera, Safari
    15.     xmlhttp=new XMLHttpRequest();
    16.   }
    17.   else
    18.   {  // code for IE6, IE5
    19.     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    20.   }
    21.  
    22.  
    23.         xmlhttp.onreadystatechange = function()
    24.             {
    25.          
    26.               if (this.readyState == 4 && this.status == 200)
    27.               {
    28.                  document.getElementById("txtHint").innerHTML = this.responseText;
    29.                }
    30.             };
    31.         xmlhttp.open("GET", "test.php?search=" + str, true);
    32.         xmlhttp.send();
    33. }
    34.  
    35. //---
    36.  }
    37. </head>
    38.  
    39. <p><b>Starten Sie eine Suchanfrage:</b></p>
    40. Alter von: <input type="text" onkeyup="showHint(this.value)">
    41. </form>
    42. <p>Anzahl Ergebnisse: <span id="txtHint"></span></p>
    43.  
    44.  
    45. </body>
    46. </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.
     
  5. Sprint

    Sprint Erfahrenes Mitglied

    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.
    Code (HTML5):
    1. <!DOCTYPE html>
    2. <html lang="de">
    3.     <meta charset="utf-8">
    4.     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    5.     <script>
    6.         $(function(){
    7.             $("#formular").keyup(function(){
    8.                 var t1 = $('#t1').val();
    9.                 var t2 = $('#t2').val();
    10.                 if(t1.length > 2){
    11.                     $.ajax({
    12.                         type: "POST",
    13.                         url: "suche.php",
    14.                         data: $("#formular").serialize(),
    15.                         cache: false,
    16.                         success: function(html){
    17.                             $("#result").html(html).show();
    18.                         }
    19.                     });
    20.                 }return false;
    21.             });
    22.         });
    23.     </script>
    24. </head>
    25.     <form id="formular">
    26.         <input type="text" id="t1" /><br>
    27.         <input type="text" id="t2" /><br>
    28.     </form>
    29.     <div id="result"></div>
    30. </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.
     
  6. son gohan

    son gohan Eingeschränktes Mitglied

Die Seite wird geladen...
Ähnliche Themen - Suchfunktion Voranzeige Anzahl
  1. reBourne
    Antworten:
    2
    Aufrufe:
    933
  2. flopsi
    Antworten:
    1
    Aufrufe:
    798