Ajax Suche

  • Ajax Suche

    Hallo zusammen :) ,

    ich wollte fürs Intranet die Telefonliste schön übersichtlich ausgeben. Da es ja vor allem zur Erleichterung dienen soll, währe eine PHP Suche nicht sehr komfortabel. Die Benutzer sollten also "Ha" eingeben können und während sie schreiben sollen alle Einträge aus der Liste mit "Ha" oder "ha" ausgegeben werden. Soweit kein Problem, hatte diesbezüglich eine schöne Suche unter blog.mynotiz.de/programmieren/…einer-mysql-datenbank-15/ (Unten die beiden Dateien angepasst) gefunden.

    Jetzt habe ich jedoch das Problem, dass
    1. Kein Inhalt angezeigt wird, wenn die Suche leer ist. Sollte lieber so sein, dass ich vordefinierten Inhalt ausgeben könnte und erst wenn in die Suchzeile vom Benutzer angefangen wird was einzugeben sollen nur noch die Suchergebnisse erscheinen. (Also z.B. vorher die ganze Liste ausgeben und wenn man was eingibt wird der Filter eingesetzt)

    2. Ich habe die Personen auf der Telefonliste in verschiedene Abteilungen eingeteilt (Eine Tabellenspalte in MySQL) und nun versuche ich hinter der input-box der Suchleiste auch eine Auswahlbox mit den Abteilungen einzufügen. Somit will ich noch eine Art zusätzlichen Filter einstellen, bei dem man nicht nur in allen Abteilungen sondern nach einem Suchbegriff auch nur in einer bestimmten Abteilung suchen kann (Wie der Where Befehl bei MySQL)


    In PHP könnte ich das vielleicht noch einigermaßen mir zusammen bauen dass es funktioniert, in Ajax (weil noch nie benutzt) jedoch bin ich völliger Anfänger und habe keine Ahnung wie ich an den vorhandenen Code (blog.mynotiz.de/howTo/PHP-AjaxLiveSuche/code/index.txt und blog.mynotiz.de/howTo/PHP-AjaxLiveSuche/code/suche.txt) so modifizieren muss, dass meine beiden Probleme gelößt werden...

    Ich hoffe ihr habt mein Problem bzw. meine Frage verstanden und würde mich über z.B. Codebeispiele beim von mir gezeigten Code freuen :thumbsup:

    Lg,
    der Tobbe

  • Wenn du die Seite selbst per PHP generierst, kannst du einfach als Standart in den Div die ganze Liste reinmachen. Alternativ kannst du das auch einfach mit AJAX lösen.

    Ich weiß nicht direkt, wie das jetzt bei deiner Tabelle aussieht.
    Die Tabelle hat also (z.B.) die Spalten user, department, ...
    Per AJAX schickst du dann wohl per POST/GET:

    Quellcode

    1. user=Max&dep=Abteilung1

    Dann verarbeitest du die Variablen.

    Quellcode

    1. $user = (preg_match("/[A-Za-z0-9_-]*/",$_POST['user'])) ? $_POST['user'] : ""; //Variable bereinigen
    2. $departments = array("Abteilung1","Abteilung2",...); //Liste der zugelassenen Abteilungen
    3. $dep = (in_array($_POST['dep'],$departments)) ? $_POST['dep'] : ""; //Variable bereinigen
    4. $user .= "*";

    Und kannst du per SQL so abfragen:

    Quellcode

    1. SELECT * FROM `phonelist` WHERE `user` LIKE '".$user."' AND `department` = '".$dep."'

  • Danke für die klasse Antwort! :)
    Irgendwie bekomme ich es aber nicht hin, dass in mein Skript einzubauen... Damit ihr mir besser helfen könnt, poste ich hier mal den Code wodrum es geht:

    Quellcode

    1. <?php
    3. echo '<input type="text" class="search-bar" />
    4. <select name="field03">
    5. <option value="">Alle (800)</option>
    6. <option value="">Azubis (10)</option>
    7. </select>
    8. <input type="submit" value="Suchen"/>
    9. </div>
    10. <ul class="tabs-actions">
    13. <table border="0" style="height:10px;">
    14. <tr><td width="80px">Allgemein:</td>
    15. <td>
    16. <li><a href="#alle">Alle</a>, &nbsp;</li>
    17. <li><a href="#azubis">Azubis</a></li>
    18. </td>
    19. </tr></table>
    20. </ul>
    22. <div id="alle">
    23. <table id="tablesorter">
    24. <thead>
    25. <tr>
    26. <th width="105">Nachname</th>
    27. <th width="105">Vorname</th>
    28. <th width="50">Intern</th>
    29. <th width="60">PC-Fax</th>
    30. <th width="110">Privat</th>
    31. <th width="110">Handy</th>
    32. </tr>
    33. </thead>
    34. <tbody>';
    35. $sqlbefehl='
    36. SELECT status, nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    37. FROM user
    38. ORDER by nachname ASC';
    40. $ergebnis = mysql_query($sqlbefehl);
    41. while($row = mysql_fetch_object($ergebnis))
    42. {
    43. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    44. }
    46. echo '</tbody>
    47. </table>
    48. </div>
    53. <div id="azubis">
    54. <table id="tablesorter">
    55. <thead>
    56. <tr>
    57. <th width="105">Nachname</th>
    58. <th width="105">Vorname</th>
    59. <th width="50">Intern</th>
    60. <th width="60">PC-Fax</th>
    61. <th width="110">Privat</th>
    62. <th width="110">Handy</th>
    63. </tr>
    64. </thead>
    65. <tbody>';
    66. $sqlbefehl='
    67. SELECT status, nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    68. FROM user
    69. WHERE status = "azubi"
    70. ORDER by nachname ASC';
    72. $ergebnis = mysql_query($sqlbefehl);
    73. while($row = mysql_fetch_object($ergebnis))
    74. {
    75. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    76. }
    78. echo'</tbody>
    79. </table>
    80. </div>';
    81. ?>
    Alles anzeigen


    Der Code funktioniert auch soweit, sodass eine Tabelle mit allen Adressen standardmäßig aufgerufen wird und durch einen klick auf "Azubis" werden nur die Auszubildenen ausgegeben.

    Das Suchfeld ist ganz am Anfang auch schon definiert mit der Auswahlbox für "Alle" und "Azubi" (Insgesamt 26 Abteilungen). Nur wie binde ich die Beispieldateien von (blog.mynotiz.de/howTo/PHP-AjaxLiv…/code/index.txt und blog.mynotiz.de/howTo/PHP-AjaxLiv…/code/suche.txt) so ein, dass es funktioniert?

    Bedanke mich für jede Hilfe! :thumbup:

  • Danke, weiß aber leider immer noch nicht wie ich das genau einbauen muss :(

    Aber fragen wir mal so: Wir haben jetzt folgende beide Codes: blog.mynotiz.de/howTo/PHP-AjaxLiveSuche/code/index.txt und blog.mynotiz.de/howTo/PHP-AjaxLiveSuche/code/suche.txt

    Verbindung steht, Eingabe klappt, Ergebnisse werden erfolgreich nach der Eingabe angezeigt. Wie schaffe ich es, dort eine Ajax-Bedienung einzubetten? Bei einem normalen PHP Formular würde das ja so aussehen:

    Quellcode

    1. <?php
    2. if(isset($_POST['abschicken']))
    3. {
    4. // Ajax Suchergebnisse anzeigen
    5. }
    6. else
    7. {
    8. // Ganze Liste der Adressen anzeigen
    9. }
    10. ?>

    Klappt nur bei der Ajax-Suche nicht :(

  • Ok, habe den Code jetzt so zusammen gepackt, damit ihr den auch zum testen benutzen könnt und habe die Ajax-Suche jetzt so integriert wie es soll:

    index.php:

    Quellcode

    1. <?php
    3. mysql_connect ("localhost","root", "") or die ("keine Verbindung möglich. Benutzername oder Passwort sind falsch");
    4. mysql_select_db("intranet") or die ("Die Datenbank existiert nicht.");
    6. echo ' <script type="text/javascript">
    7. function searchFor(suchbegriff){
    8. var xmlHttp = null;
    9. // Mozilla, Opera, Safari sowie Internet Explorer 7
    10. if (typeof XMLHttpRequest != \'undefined\') {
    11. xmlHttp = new XMLHttpRequest();
    12. }
    13. if (!xmlHttp) {
    14. // Internet Explorer 6 und älter
    15. try {
    16. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    17. } catch(e) {
    18. try {
    19. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    20. } catch(e) {
    21. xmlHttp = null;
    22. }
    23. }
    24. }
    25. // Wenn das Objekt erfolgreich erzeugt wurde
    26. if (xmlHttp) {
    27. var url = "suche.php";
    28. var params = "suchbegriff="+suchbegriff;
    30. xmlHttp.open("POST", url, true);
    32. //Headerinformationen für den POST Request
    33. xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    34. xmlHttp.setRequestHeader("Content-length", params.length);
    35. xmlHttp.setRequestHeader("Connection", "close");
    37. xmlHttp.onreadystatechange = function () {
    38. if (xmlHttp.readyState == 4) {
    39. // Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
    40. document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
    41. }
    42. };
    43. xmlHttp.send(params);
    44. }
    45. }
    46. </script>
    48. <div id="search-bar">
    50. <input type="text" class="search-bar" onkeyup="searchFor(this.value);"/>
    51. <select name="field03">
    52. <option value="">Alle (130)</option>
    53. <option value="">Azubis (10)</option>
    54. <option value="">Buchhaltung (50)</option>
    55. <option value="">EDV (30)</option>
    56. <option value="">Leitung (40)</option>
    57. </select>
    58. <input type="submit" value="Suchen" class="btn-140" />
    59. </div>
    60. <ul class="tabs-actions">
    63. <table border="0" style="height:10px;">
    64. <tr><td width="80px">Allgemein:</td>
    65. <td>
    66. <li><a href="#alle">Alle</a>, &nbsp;</li>
    67. <li><a href="#azubis">Azubis</a></li>
    68. </td>
    69. </tr>
    70. <tr><td valign="top">Abteilungen:</td>
    71. <td>
    72. <li><a href="#buchhaltung">Buchhaltung</a>, &nbsp;</li>
    73. <li><a href="#edv">EDV</a>, &nbsp;</li>
    74. <li><a href="#leitung">Leitung</a>, &nbsp;</li>
    75. </td>
    76. </tr></table>
    78. <div id="ergebnis"></div>
    82. </ul>
    84. <div id="alle">
    85. <table id="tablesorter">
    86. <thead>
    87. <tr>
    88. <th width="105">Nachname</th>
    89. <th width="105">Vorname</th>
    90. <th width="50">Intern</th>
    91. <th width="60">PC-Fax</th>
    92. <th width="110">Privat</th>
    93. <th width="110">Handy</th>
    94. </tr>
    95. </thead>
    96. <tbody>';
    97. $sqlbefehl='
    98. SELECT status, nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    99. FROM cpr_user
    100. ORDER by nachname ASC';
    102. $ergebnis = mysql_query($sqlbefehl);
    103. while($row = mysql_fetch_object($ergebnis))
    104. {
    105. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    106. }
    108. echo'</tbody>
    109. </table>
    110. </div>
    114. <div id="azubis">
    115. <table id="tablesorter">
    116. <thead>
    117. <tr>
    118. <th width="105">Nachname</th>
    119. <th width="105">Vorname</th>
    120. <th width="50">Intern</th>
    121. <th width="60">PC-Fax</th>
    122. <th width="110">Privat</th>
    123. <th width="110">Handy</th>
    124. </tr>
    125. </thead>
    126. <tbody>';
    127. $sqlbefehl='
    128. SELECT status, nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    129. FROM cpr_user
    130. Where status = "azubi"
    131. ORDER by nachname ASC';
    133. $ergebnis = mysql_query($sqlbefehl);
    134. while($row = mysql_fetch_object($ergebnis))
    135. {
    136. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    137. }
    139. echo'</tbody>
    140. </table>
    141. </div>';
    144. function bereiche ($var) {
    145. echo' <div id="'.$var.'">
    146. <table id="tablesorter">
    147. <thead>
    148. <tr>
    149. <th width="105">Nachname</th>
    150. <th width="105">Vorname</th>
    151. <th width="50">Intern</th>
    152. <th width="60">PC-Fax</th>
    153. <th width="110">Privat</th>
    154. <th width="110">Handy</th>
    155. </tr>
    156. </thead>
    157. <tbody>';
    158. $sqlbefehl="
    159. SELECT nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    160. FROM cpr_user
    161. WHERE abteilung = '".$var."'
    162. ORDER by nachname ASC";
    164. $ergebnis = mysql_query($sqlbefehl);
    165. while($row = mysql_fetch_object($ergebnis))
    166. {
    167. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    168. }
    169. echo '</tbody>
    170. </table>
    171. </div>';
    173. }
    176. bereiche("buchhaltung");
    177. bereiche("leitung");
    178. bereiche("edv");
    181. echo'<br/>
    182. <br/>
    183. <br/>
    184. </div>
    185. </li>
    186. </ul>
    187. </div>
    188. </div>';
    189. ?>
    Alles anzeigen


    suche.php:

    Quellcode

    1. <?php
    2. // Verbindung
    3. $server = "localhost";
    4. $benutzername = "root";
    5. $passwort = "";
    7. $datenbank = "cpr_intranet";
    9. // Server Verbindung herstellen
    10. mysql_connect($server,$benutzername,$passwort) or
    11. die ("Keine Verbindung moeglich");
    13. // Datenbank Verbidung
    14. mysql_select_db($datenbank) or
    15. die ("Die Datenbank existiert nicht");
    18. if ($_POST["suchbegriff"]){
    19. // Mysql Abfrage wird gespeichert mit den Notwendigen Parameter
    20. $sql = "SELECT * FROM cpr_user WHERE vorname LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    21. nachname LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    22. tel_intern LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    23. tel_pcfax LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    24. tel_privat LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    25. tel_handy LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    26. abteilung LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')";
    28. // Mysql Abfrage wird durchgeführt
    29. $result = mysql_query($sql);
    31. // Suchbegriff wird ausgegeben
    32. echo "Sie Suchten nach: ".$_POST["suchbegriff"]."<br/><br/>";
    36. echo '
    37. <table id="tablesorter">
    38. <thead>
    39. <tr>
    40. <th width="105">Nachname</th>
    41. <th width="105">Vorname</th>
    42. <th width="50">Intern</th>
    43. <th width="60">PC-Fax</th>
    44. <th width="110">Privat</th>
    45. <th width="110">Handy</th>
    46. </tr>
    47. </thead>
    48. <tbody>';
    52. // Ergebnis wird ausgegeben mit Zeilenumbruch
    53. while($row = mysql_fetch_object($result)){
    55. echo "<tr><td>".htmlentities($row->nachname)."</td><td>".htmlentities($row->vorname)."</td><td>".htmlentities($row->tel_intern)."</td><td>".htmlentities($row->tel_pcfax)."</td><td>".htmlentities($row->tel_privat)."</td><td>".htmlentities($row->tel_handy)."</td></tr>";
    60. }
    61. echo'</tbody>
    62. </table>
    63. </div>';
    64. }
    65. ?>
    Alles anzeigen



    Läuft auch ganz gut so wie ich mir das nun zusammen gelegt habe, nur habe ich genau die Probleme die ich im ersten Post schon angedeutet habe:
    Inhalt ausblenden
    Normalerweise werdeb ja in der index.php ja standardmäßig schon Listen angezeigt womit man bisher per Div hin und her switchen kann. Zusätzlich soll ja auch noch die Suche sein. Wenn man jetzt was eingibt, werden die Suchergebnisse einfach ausgegeben und der bisherige Inhalt wird nach unten unter die Ergebnisse geschoben. Das soll natürlich nicht sein, wenn man was in die Suchmaschine eingibt sollen NUR die Ergebnisse angezeigt werden und wenn die input-Box leer ist, soll der normale Inhalt angezeigt werden.

    Auswahlbox
    Ganz oben im Code bzw. in der Ausgabe der index.php sieht man eine Auswahlbox der gegebenen Abteilungen. Wenn man (wie standardmäßig ausgewählt) "Alle" auswählt, werden die Suchmaschine aus allen Datensätzen ausgegeben. Wird jedoch nur "EDV" ausgewählt, soll der Suchbegriff auch nur bei allen Datensätzen gesucht werden, die in der Spalte "abteilung" den Wert "edv" stehen haben.

    Ich hoffe ihr könnt mir da helfen!

    Danke! :)

  • Hi,
    die Anforderungen sind nun klar. Aber wo sind die Probleme bei der Umsetzung ;)

    Inhalt ausblenden. Wenn du mit zwei Containern arbeitest hast du den Vorteil, dass du zwischen diesen hin- und herspringen kannst. Je nachdem ob die Sucheingabe leer oder voll ist.

    Quellcode

    1. function switch(sucheingabe) {
    2. var x = document.getElementById('hauptcontainer');
    3. var y = document.getElementById('suchcontainer');
    4. x.style.display = sucheingabe == "" ? "block" : "none";
    5. y.style.display = sucheingabe != "" ? "block" : "none";
    6. }


    Auswahlbox.
    Gib deiner Auswahlbox eine ID. Diese kannst du dann einfach via ID ansprechen.
    Wenn du eine Mehrfachauswahl erlaubst, ist es nicht ganz so trivial, das mit JavaScript durchzugeben. Aber dazu habe ich mal ein JavaScript erstellt, siehe [wiki]Formulare mit AJAX.. und ohne[/wiki]

  • Danke, habe jetzt mal beim ersten Problem folgendes versucht:

    Quellcode

    1. <script type="text/javascript">
    2. function switch(sucheingabe) {
    3. var x = document.getElementById('hauptcontainer');
    4. var y = document.getElementById('suchcontainer');
    5. x.style.display = sucheingabe == "" ? "block" : "none";
    6. y.style.display = sucheingabe != "" ? "block" : "none";
    7. }
    8. </script>
    10. [.....]
    12. <input type="text" class="search-bar" onkeyup="searchFor(this.value);" onkeyup="switch(this.value);"/>
    14. [.....]
    16. <div id="hauptcontainer">Test</div>
    17. <div id="suchcontainer">Test2</div>
    Alles anzeigen


    Was mache ich falsch?

  • Ich weiß jetzt nicht, wie dein aktueller Quelltext aussieht, aber falls du die Funktion searchFor noch nicht implementiert hast, dann kann dies dazu führen, dass es bei dir nicht funktioniert.
    Versuche es einfach mal mit

    Quellcode

    1. <input type="text" class="search-bar" onkeyup="umschalter(this.value);" onkeyup="searchFor(this.value);" />

    Dann führt er zuerst umschalter() aus. Noch ein Tipp: Vor / kommt noch ein Leerzeichen, wie du oben siehst.
    Dank der toleranten Parser der Browser wird es wahrscheinlich auch ohne funktionieren, aber man sollte doch darauf achten korrektes (X)HTML zu schreiben.
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

  • Interessant, in der Reihenfolge klappt es wirklich! (Wobei sich das für mich jetzt nicht gerade logisch erklärt... :D)

    Wenn ich jetzt etwas eingebe erscheint "Test2" und wenn ich es aus dem Suchfeld wieder lösche "Test". Genau so soll es sein, jedoch werden beim Aufruf der Seite automatisch beide Container angezeigt? Möchte ja, dass wenn das Suchfeld leer ist (Was es ja beim Aufruf des Scriptes immer ist), dass dann die Standardtabelle (In dem Beispiel also "Test") angezeigt wird - Wie muss ich da den Code anpassen?

    Danke auf jeden Fall :D

  • Du könntest folgendes in deinen Code einfügen: <body onload="umschalter('')">
    Damit wird nach dem Laden der Seite die Funktion umschalter() ausgeführt. Ich habe dazu noch einen leeren String übergeben, damit die if-Abfrage korrekt arbeitet.

    Zu der Reihenfolge: Funktioniert searchFor() denn? Wenn du die Funktion noch nicht deklariert hast, dann kommt es zu einem Fehler, wodurch die weiteren onkeyup-Events nicht mehr ausgeführt werden.
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

  • Hey, super! Das klappt nun auch :)

    Das letzte Problem was ich jetzt habe ist, dass das Div für die Suchausgabe anscheinend nicht in den Container passt. Habe es so eingebaut:

    Quellcode

    1. <div id="suchcontainer"><div id="ergebnis"></div></div>
    3. <div id="hauptcontainer">
    5. [.... der andere Code ....]
    7. </div>


    Der Hauptcontainer wird auch angezeigt, nur wenn etwas ins Input-Feld eingegeben wurde wird nichts ausgegeben?! Tausche ich nun "<div id="ergebnis"></div>" ganz Stumpf mit dem Text "Test", wird Test jedoch ganz normal ausgegeben wenn ich etwas eingebe.

    PS: Die searchFor-Funktion ist vorhanden, siehe den Code: Ajax Suche

  • Ich weiß nicht ob ich dich richtig verstanden habe.

    Du gibst etwas ein und der Container wird eingeblendet, hat aber keinen Inhalt?
    Hast du schonmal versucht mit einem Debugger wie Firebug die Antwort des Servers abzufangen?

    Hat mir als ich mit Ajax rumhantiert habe echt geholfen xD

    Quellcode

    1. if (xmlHttp) {
    2. var url = "suche.php?suchbegriff="+suchbegriff;
    4. xmlHttp.open("POST", url, true);
    6. //Headerinformationen für den POST Request
    7. xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    8. xmlHttp.setRequestHeader("Content-length", params.length);
    10. xmlHttp.onreadystatechange = function () {
    11. if (xmlHttp.readyState == 4) {
    12. // Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
    13. document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
    14. }
    15. };
    16. }
    Alles anzeigen


    Versuch es mal so. Auf die Daten greifst du dann per $_GET zu.
    Sonst poste mal Link zu der Suche dann debugge ich das mal xD

    n0x-f0x
    </nobrain>

  • n0x-f0x schrieb:

    Ich weiß nicht ob ich dich richtig verstanden habe.

    Dann gebe ich euch mal meinen aktuellen Code, damit ihr mein Problem vielleicht besser versteht:

    index.php

    Quellcode

    1. <?php
    3. mysql_connect ("localhost","root", "") or die ("keine Verbindung möglich. Benutzername oder Passwort sind falsch");
    4. mysql_select_db("cpr_intranet") or die ("Die Datenbank existiert nicht.");
    6. echo ' <script type="text/javascript">
    7. function searchFor(suchbegriff){
    8. var xmlHttp = null;
    9. // Mozilla, Opera, Safari sowie Internet Explorer 7
    10. if (typeof XMLHttpRequest != \'undefined\') {
    11. xmlHttp = new XMLHttpRequest();
    12. }
    13. if (!xmlHttp) {
    14. // Internet Explorer 6 und älter
    15. try {
    16. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    17. } catch(e) {
    18. try {
    19. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    20. } catch(e) {
    21. xmlHttp = null;
    22. }
    23. }
    24. }
    25. // Wenn das Objekt erfolgreich erzeugt wurde
    26. if (xmlHttp) {
    27. var url = "suche.php";
    28. var params = "suchbegriff="+suchbegriff;
    30. xmlHttp.open("POST", url, true);
    32. //Headerinformationen für den POST Request
    33. xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    34. xmlHttp.setRequestHeader("Content-length", params.length);
    35. xmlHttp.setRequestHeader("Connection", "close");
    37. xmlHttp.onreadystatechange = function () {
    38. if (xmlHttp.readyState == 4) {
    39. // Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
    40. document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
    41. }
    42. };
    43. xmlHttp.send(params);
    44. }
    45. }
    49. function umschalter(sucheingabe) {
    50. var x = document.getElementById(\'hauptcontainer\');
    51. var y = document.getElementById(\'suchcontainer\');
    52. x.style.display = sucheingabe == "" ? "block" : "none";
    53. y.style.display = sucheingabe != "" ? "block" : "none";
    54. }
    55. </script>
    56. <body onload="umschalter(\'\')">
    57. <div id="search-bar">
    59. <input type="text" class="search-bar" onkeyup="umschalter(this.value);" onkeyup="searchFor(this.value);" />
    60. <select name="field03">
    61. <option value="">Alle (130)</option>
    62. <option value="">Azubis (10)</option>
    63. <option value="">Buchhaltung (50)</option>
    64. <option value="">EDV (30)</option>
    65. <option value="">Leitung (40)</option>
    66. </select>
    67. <input type="submit" value="Suchen" class="btn-140" />
    68. </div>
    71. <div id="suchcontainer"><div id="ergebnis"></div></div>
    76. <div id="hauptcontainer">
    82. <ul class="tabs-actions">
    84. <table border="0" style="height:10px;">
    85. <tr><td width="80px">Allgemein:</td>
    86. <td>
    87. <li><a href="#alle">Alle</a>, &nbsp;</li>
    88. <li><a href="#azubis">Azubis</a></li>
    89. </td>
    90. </tr>
    91. <tr><td valign="top">Abteilungen:</td>
    92. <td>
    93. <li><a href="#buchhaltung">Buchhaltung</a>, &nbsp;</li>
    94. <li><a href="#edv">EDV</a>, &nbsp;</li>
    95. <li><a href="#leitung">Leitung</a>, &nbsp;</li>
    96. </td>
    97. </tr></table>
    99. </ul>
    102. <div id="alle">
    103. <table id="tablesorter">
    104. <thead>
    105. <tr>
    106. <th width="105">Nachname</th>
    107. <th width="105">Vorname</th>
    108. <th width="50">Intern</th>
    109. <th width="60">PC-Fax</th>
    110. <th width="110">Privat</th>
    111. <th width="110">Handy</th>
    112. </tr>
    113. </thead>
    114. <tbody>';
    115. $sqlbefehl='
    116. SELECT status, nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    117. FROM cpr_user
    118. ORDER by nachname ASC';
    120. $ergebnis = mysql_query($sqlbefehl);
    121. while($row = mysql_fetch_object($ergebnis))
    122. {
    123. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    124. }
    126. echo'</tbody>
    127. </table>
    128. </div>
    132. <div id="azubis">
    133. <table id="tablesorter">
    134. <thead>
    135. <tr>
    136. <th width="105">Nachname</th>
    137. <th width="105">Vorname</th>
    138. <th width="50">Intern</th>
    139. <th width="60">PC-Fax</th>
    140. <th width="110">Privat</th>
    141. <th width="110">Handy</th>
    142. </tr>
    143. </thead>
    144. <tbody>';
    145. $sqlbefehl='
    146. SELECT status, nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    147. FROM cpr_user
    148. Where status = "azubi"
    149. ORDER by nachname ASC';
    151. $ergebnis = mysql_query($sqlbefehl);
    152. while($row = mysql_fetch_object($ergebnis))
    153. {
    154. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    155. }
    157. echo'</tbody>
    158. </table>
    159. </div>';
    162. function bereiche ($var) {
    163. echo' <div id="'.$var.'">
    164. <table id="tablesorter">
    165. <thead>
    166. <tr>
    167. <th width="105">Nachname</th>
    168. <th width="105">Vorname</th>
    169. <th width="50">Intern</th>
    170. <th width="60">PC-Fax</th>
    171. <th width="110">Privat</th>
    172. <th width="110">Handy</th>
    173. </tr>
    174. </thead>
    175. <tbody>';
    176. $sqlbefehl="
    177. SELECT nachname, vorname, tel_intern, tel_pcfax, tel_privat, tel_handy
    178. FROM cpr_user
    179. WHERE abteilung = '".$var."'
    180. ORDER by nachname ASC";
    182. $ergebnis = mysql_query($sqlbefehl);
    183. while($row = mysql_fetch_object($ergebnis))
    184. {
    185. echo "<tr><td>$row->nachname</td><td>$row->vorname</td><td>$row->tel_intern</td><td>$row->tel_pcfax</td><td>$row->tel_privat</td><td>$row->tel_handy</td></tr>";
    186. }
    187. echo '</tbody>
    188. </table>
    189. </div>';
    191. }
    194. bereiche("buchhaltung");
    195. bereiche("leitung");
    196. bereiche("edv");
    199. echo'
    200. </div></div><br/>
    201. <br/>
    202. <br/>
    203. </div>
    204. </li>
    205. </ul>
    206. </div>
    207. </div>';
    208. ?>
    Alles anzeigen


    suche.php

    Quellcode

    1. <?php
    2. // Verbindung
    3. $server = "localhost";
    4. $benutzername = "root";
    5. $passwort = "";
    7. $datenbank = "cpr_intranet";
    9. // Server Verbindung herstellen
    10. mysql_connect($server,$benutzername,$passwort) or
    11. die ("Keine Verbindung moeglich");
    13. // Datenbank Verbidung
    14. mysql_select_db($datenbank) or
    15. die ("Die Datenbank existiert nicht");
    18. if ($_POST["suchbegriff"]){
    19. // Mysql Abfrage wird gespeichert mit den Notwendigen Parameter
    20. $sql = "SELECT * FROM cpr_user WHERE vorname LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    21. nachname LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    22. tel_intern LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    23. tel_pcfax LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    24. tel_privat LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    25. tel_handy LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')OR
    26. abteilung LIKE ('%".mysql_real_escape_string(utf8_decode($_POST["suchbegriff"]))."%')";
    28. // Mysql Abfrage wird durchgeführt
    29. $result = mysql_query($sql);
    31. // Suchbegriff wird ausgegeben
    32. echo "Sie Suchten nach: ".$_POST["suchbegriff"]."<br/><br/>";
    36. echo '
    37. <table id="tablesorter">
    38. <thead>
    39. <tr>
    40. <th width="105">Nachname</th>
    41. <th width="105">Vorname</th>
    42. <th width="50">Intern</th>
    43. <th width="60">PC-Fax</th>
    44. <th width="110">Privat</th>
    45. <th width="110">Handy</th>
    46. </tr>
    47. </thead>
    48. <tbody>';
    52. // Ergebnis wird ausgegeben mit Zeilenumbruch
    53. while($row = mysql_fetch_object($result)){
    55. echo "<tr><td>".htmlentities($row->nachname)."</td><td>".htmlentities($row->vorname)."</td><td>".htmlentities($row->tel_intern)."</td><td>".htmlentities($row->tel_pcfax)."</td><td>".htmlentities($row->tel_privat)."</td><td>".htmlentities($row->tel_handy)."</td></tr>";
    60. }
    61. echo'</tbody>
    62. </table>
    63. </div>';
    64. }
    65. ?>
    Alles anzeigen


    In Zeile 70 und 77 beginnen dabei die Container. Der Hauptcontainer wird angezeigt, wenn ich jedoch nun etwas eingebe ins Feld. wird kein Content angezeigt?

  • Ich kann jetzt auf den ersten Blick keinen Fehler erkennen. Hast du denn mal überprüft, ob dein Ajax Request auch ausgeführt wird und du die erwartete Antwort bekommst? Sowas kann man, wie bereits erwähnt sehr gut mit Firebug und Firefox nach gucken.
    Ansonsten würde ich mich auch über ein Live Beispiel freuen, da wir ja nicht die Daten haben um ein funktionierendes Beispiel mit PHP zu erstellen. Also einfach mal die Dateien auf deinen Webspace hoch laden und den Link posten.
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

  • Ich würd mir ja gerade Daten ausdenken und alles auf einen Server tun wenn ich nicht gerade Ferien und wegefahren... (jaja, (deutsche Grammatik && Schüler) == SCHLECHT)

    wenn du das irgendwo hosten könntest wäre echt gut. Ich habe jz leider nicht die Zeit/Lust deinen ganzen Code durchzusuchen wobei ich es wahrscheinlich nach diesem Post eh tun werde xD

    Also, bitte mal i-wo hosten...

    n0x-f0x

    Edit : Ja, ich habe angefangen zu lesen xD
    AjaxFactoryPattern.js

    Quellcode

    1. function getXMLHttpRequestObject ()
    2. {
    3. if (window.XMLHttpRequest)
    4. {
    5. return new XMLHttpRequest();
    6. } else if (window.ActiveXObject)
    7. {
    8. var msxml = new Array ( 'Msxml2.XMLHTTP.5.0',
    9. 'Msxml2.XMLHTTP.4.0',
    10. 'Msxml2.XMLHTTP.3.0',
    11. 'Msxml2.XMLHTTP.6.0',
    12. 'Msxml2.XMLHTTP.7.0',
    13. 'Msxml2.XMLHTTP');
    14. for (var i = 0; i < msxml.length; i++)
    15. {
    16. try
    17. {
    18. return new ActiveXObject(msxml[i]);
    19. } catch (e) {}
    20. }
    21. }
    22. throw new Error('XMLHttpRequest Object can not be created');
    23. }
    Alles anzeigen


    JS für die index.php (versuch das mal zu debuggen oder hoste das & dann link)

    Quellcode

    1. <script type="text/javascript" language="javascript" src="AjaxFactoryPattern.js"></script>
    2. <script type="text/javascript">
    3. var xmlHttp = getXMLHttpRequestObject ()
    4. function searchFor(suchbegriff){
    5. if (suchbegriff != "")
    6. {
    7. // Wenn das Objekt erfolgreich erzeugt wurde
    8. if (xmlHttp) {
    9. var url = "suche.php";
    10. var params = "suchbegriff="+suchbegriff;
    12. xmlHttp.open("POST", url, true);
    14. xmlHttp.onreadystatechange = function () {
    15. if (xmlHttp.readyState == 4) {
    16. // Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
    17. umschalter(xmlHttp.responseText);
    18. }
    19. };
    21. //Headerinformationen für den POST Request
    22. xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    23. xmlHttp.send(params);
    24. } else {
    25. alert("Fehler Dings Bums!");
    26. }
    27. } else
    28. {
    29. umschalter(suchbegriff);
    30. }
    31. }
    33. function umschalter(suchergebniss) {
    34. var x = document.getElementById(\'hauptcontainer\');
    35. var y = document.getElementById(\'suchcontainer\');
    36. if(suchergebniss == "")
    37. {
    38. x.style.display = "block"
    39. y.style.display = "none";
    40. } else {
    41. document.getElementById("ergebnis").innerHTML = suchergebniss;
    42. y.style.display = "block"
    43. x.style.display = "none";
    44. }
    45. }
    46. </script>
    Alles anzeigen

    Wenn du das JS benutzt musst du umschalter(this.value) aus dem onkeyup vom input field nehmen, sonst wird einiges falsch laufen.

    wenn ich jedoch nun etwas eingebe ins Feld. wird kein Content angezeigt?

    Doch, der ist nur leer...

    PS: Das nächste mal wenn du in einem Forum ein Problem hast tu den Leuten doch den gefalllen und poste möglichst wenig Code... Man hätte als Beispiel die Formatierung (Tabellen) weglassen können, weil die Meisten oder vllt. bin ich auch der einzige, naja ich mag halt nicht unnützen Code lesen wo zu 99% kein Fehler drin steckt... Nicht böse gemeint ok?
    </nobrain>

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von n0x-f0x ()