PHP: Tutorial Ajax Suche aus einer MySQL Datenbank

Posted: Juli 25th, 2008 | Filed under: Datenbank, Programmieren, Tutorials | Tags: , , , , , , , , , , | 50 Comments »

Heute möchte ich euch zeigen wie man Schritt für Schritt eine LiveSuche(ohne nachladen der Seite) mit PHP, HTML & Ajax realisiert.

JavaScript + PHP + MySQL = Ajax Triple Action

Was ist Ajax ?

Asynchronous JavaScript and XML. Wenn man normalerweise auf einen Link klickt gelangt man meistens auf eine andere Seite. Die Link Url sagt dem Server, was für eine Seite wir zurückbekommen wollen. Dieser sogenannte Request kann man mit JavaScript auch ohne Neuladen der Seite erreichen. Es gibt 2 Grundsätzliche Arten von Requests: POST(wird bei Formularen verwendet) & GET(wird bei Links verwendet). Mit einem sogenannten XMLHttpRequest kann man solche Requests durchführen. Die Antwort des Servers kann man dann auslesen und den zurückgelieferten Inhalt mit JavaScript weiterverarbeiten.

Das Formular

Oft werden Anfragen auch über ein Formular abgeschickt (meistens mit POST). Da wir das Absenden unserer Anfrage per JavaScript realisieren brauchen wir kein herkömmliches Formular…

Im Prinzip reicht uns sogar ein herkömmliches Textfeld (ohne Form):

Die Eingabe eines Users wollen wir natürlich verarbeiten. Da wir eine AjaxSuche schreiben soll also bei jedem Tastendruck eine neue Anfrage an den Server gestellt werden. Per „onKeyUp“ auf dem Texteingabefeld können wir nun eine JavaScriptfunktion ausführen. Wir geben als Übergabeparameter für diese Funktion den eigenen Wert (also was im Textfeld steht) mit, um die Eingabe weiterzuverarbeiten. Zum testen ob das auch funktioniert hat, lassen wir uns unsere Eingabe als Alarmfenster ausgeben. Als Funktionsnamen nehmen wir etwas sprechendes „searchFor“. Und mit this.value können wir einfach auf den Wert des Objektes in dem die Funktion aufgerufen wird zugreifen.

Die Anfrage

Jetzt kommen wir zum schwierigsten Teil. Nun wird in userer JavaScript Methode ein xmlHttp Request erzeugt. Unsere Anfrage soll an die Seite „suche.php“ gehen. Diese URL können wir in Zeile 25 festlegen.

In Zeile 26 werden die Parameter die wir an den mit dem Request übergeben möchten gesetzt. Hier kommt unser Übergabeparameter der JavaScript Funktion ins Spiel. Dieser „suchbegriff“ wird nun dem Parameter mit dem Namen „suchbegriff“ zugewiesen. Es muss natürlich nicht der selbe Namen sein.

In Zeile 38 wird dann das Ergebnis aus dem Request (der Seite suche.php) zurückgeliefert!

Testweise schreiben wir in die Datei suche.php lediglich folgendes

Hier wird nun einfach ein beliebiger Wert ausgegeben. Um zu testen ob der HttpRequest auch funktioniert rufen wir die index.php auf und geben irgendwas ein. Sobald das erste Zeichen eingegeben wurde wird der Text aus der suche.php Datei ausgegeben.

Die Mysql Abfrage

Jetzt kümmern wir uns um die Datenbank. Hierbei sind folgende Dinge notwendig:

  1. Server (bei Webspace und Servern mit Datenbank fast immer „localhost„)
  2. Benutzername (euer Benutzername / Accountname)
  3. Passwort (euer Passwort (TOP SECRET!))

Wir stellen also eine Datenbankverbidung her (Zeile: 3-15) und führen das erstellte MySQL Statement aus (Zeile 19-23). Zum Statement gibt es folgendes zu sagen: „SELECT * “ markiert alle Spalten in einer Tabelle, „FROM „.$tabelle.““ wählt die Tabelle aus die in der Varialen $tabelle steht, „titel LIKE (‚%“.$_POST[„suchbegriff“].“%‘)“ stellt eine Bedingung auf die folgendes bedeutet: gib mir alle Einträge der Spalte titel aus, die wie XXXXXsuchbegriffXXXXX lauten. Also wenn ich z.B. „rlsruh“ Suche und es existiert ein Bild mit dem Titel „Karlsruhe“ wird dieses natürlich auch gefunden.

So das wars auch schon. Hier nachmal der ganze Quellcode als Textdatei.

Demo

Habe eine kleine Testtabelle erstellt mit Sehenswürdigkeiten aus Karlsruhe! Einfach mal zum Beispiel: „Wildparkstadion“ oder „Schloss„eingeben und ihr seht, schon nach dem ersten Buchstabe erscheinen alle möglichen Ergebnisse!

hier klicken

Quellcode

index.php

suche.php

Viel Spaß damit!

Keine Beiträge.

50 Comments on “PHP: Tutorial Ajax Suche aus einer MySQL Datenbank”

  1. 1 Deine Mudda said at 14:10 on Dezember 29th, 2008:

    Wenn man ne große Datenbank hat, ist das ziemlich ressuourcenfressend, oder?
    Ansonsten ne schöne Sache.

    Danke:)

  2. 2 admin said at 11:38 on Januar 7th, 2009:

    Das stimmt natürlich 😀

  3. 3 schokodrop said at 09:09 on Juni 27th, 2009:

    Ist es möglich eine Fehlermeldung auszugeben, wenn kein Eintrag in der Datenbank gefunden wurde?
    (Es wurde kein passender Eintrag gefunden.)

    Danke

  4. 4 admin said at 13:18 on Juni 27th, 2009:

    Ja das kannst du mit der funktion http://www.php.net/mysql_num_rows. Du prüfst also ob mysql_num_rows($result) gleich 0.

  5. 5 RolZet said at 10:21 on September 18th, 2009:

    Hallo,

    vielen Dank für das Script, funktioniert einwandfrei.
    Allerdings stehe ich vor einem kleinen Problem. Bei vielen Datensätzen gibts das ja ne ellenlange Liste. Ich hätte gern nach 10 oder 12 Einträgen jeweils ein Pfeilchen zum Blättern auf eine weitere Seite. Hast du mir eventuell einen Ansatz wie ich das realisieren könnte?

    Vielen Dank
    Viele Grüße

  6. 6 Gardinero said at 14:00 on Oktober 9th, 2009:

    Super Sache.

    Kann man irgendwie gewährleisten, dass die suche erst ab 3 eingegebenen Zeichen beginnt?

    Gruß
    Gardinero

  7. 7 Gardinero said at 17:49 on Oktober 9th, 2009:

    Hab es gerade selbst hinbekommen mit einer vorgeschalteten if-Abfrage.

    Gruß

  8. 8 fisonna said at 15:46 on März 18th, 2010:

    Hi! Kann man eigentlich auch mehr ausgeben als nur den Inhalt des Suchfeldes? Also geich die ganze Zeile wo der gesuchte DAtensatz drinsteht?
    Gruß

  9. 9 Berlino said at 12:57 on April 30th, 2010:

    Ist es möglich, dass Alle Einträge angezeigt werden, solange das Suchfeld noch frei ist?
    Ich hätte gerne eine Anzeige ähnlich wie bei iTunes, es werden alle Titel angezeigt, bis man die Anzeige durch die Eingabe im Suchfeld begrenzt.

    🙂 Gruß aus Berlin

  10. 10 Suchergebnisse schon beim Eintippen mit jQuery « Blog « Advitum Webdesign said at 20:15 on September 24th, 2010:

    […] PHP: Tutorial Ajax Suche aus einer MySQL Datenbank […]

  11. 11 AJAX Suche - php.de said at 21:25 on Dezember 16th, 2010:

    […] sind in einer SQL Datenbank hinterlegt. Die Suche ansich ist leicht zu realisieren wie z.B. auf http://blog.mynotiz.de/programmieren…-datenbank-15/ beschrieben. Auch die Anforderung nach den ersten Zwei Buchstaben erst die Suche zu starten ist […]

  12. 12 required said at 23:51 on Januar 28th, 2011:

    hallo, als erstes mal das ist eine Hammer Script, ich aheb das bei mir eingebaut, und es tut echt der Hammer. Danke, ….

    nur eine Sache Stört mich ein wenig, … ich muss immer erst was eintippen bevor etwas kommt, ich hätte gerne wenn nichts eingetippt wurde und das Feld noch nicht Aktiv war alle eintrage in der DIV angezeigt werden, ….

    Wie kann man denn so was machen ??

    Denn ich denke daran das nicht immer bei allen javaScript aktiv ist und wenn das der Fall ist würde bei mir keine Adresse gefunden 🙁 das wäre natürlich denkbar Schlecht 🙂

  13. 13 admin said at 12:30 on Januar 29th, 2011:

    Sowas geht ohne Probleme: Du kannst das zum Beispiel so realisieren:

    In der HTML/Javascript Datei
    Quasi eine leere Suchanfrage:
    < ..body onload="searchFor('')"..>

    In der PHP-Datei:
    Falls der Suchbegriff leer ist dann führe das gleiche MSQL – Statement aus ohne WHERE Bedingung => Sprich alle Einträge
    if($_POST[„suchbegriff“] == “){
    ..SELECT … ohne WHERE Bedingung
    }

  14. 14 Henrik said at 23:06 on Februar 4th, 2011:

    Moin. Soweit geht alles. Aber welche Zeilen und Spalten soll ich in der Datenbank denn machen?
    Also woher soll ich wissen was ich da einfügen soll?

    Danke schonmal
    ———
    Viele Grüße
    Henrik

  15. 15 MIH said at 09:47 on März 9th, 2011:

    Hey finde das Tutorial gut erklärt, mach bitte weiter so, du machst gute arbeit

  16. 16 PHP-Fragen - Seite 126 - nPage.de - Forum said at 15:54 on April 13th, 2011:

    […] […]

  17. 17 TK said at 16:17 on August 2nd, 2011:

    Coole sache, wie bekomme ich das Ergebnis nun in einen Layer wie man es von google oder Ähnlichem kennt?

    Danke euch

  18. 18 vrc7 said at 10:37 on April 10th, 2012:

    Hey, sieht gut aus das Tutorial, allerdings ist das erste Bild unter „Die Anfrage“ nichtmehr verfügbar. Vielleicht kannst du das mal fixen 🙂

  19. 19 AH said at 10:56 on Juni 28th, 2012:

    Hey, vielen danke für das Skript, habs an meine Bedürfnisse angepasst, funktioniert super.
    1 kleiner Fehler ist mir allerdings aufgefallen: „ü“ und „y“ führt zu denselben Suchergebnissen, d.h. wenn man in deinem Bsp. nach „ü“ sucht, bekommt man auch „Pyramide“ als Ergebnis. Jemand eine Idee wie man das behebt?

    Viele Grüße

  20. 20 admin said at 11:09 on Juni 28th, 2012:

    Vielen Dank, gut erkannt.

    Das sieht wohl nach irgend einem Umlaut Problem aus. Lösung habe ich leider auch nicht parat…

  21. 21 Tim Thaler said at 11:12 on September 23rd, 2012:

    Hallo,

    finde das Skript prima, kann ich super einbauen. Mir fehlt nur die Möglichkeit auf ein Wort in der Auswahl zu klicken um das Wort per Klick im Suchfeld zu übernehmen – Ist das einfach zu lösen ? Wer weiß Rat ?

    Grüße
    Tim

  22. 22 Frank said at 12:26 on Februar 7th, 2013:

    vielen dank
    super !!! genau sowas habe ich zum einstieg mit ajax gesucht

  23. 23 admin said at 16:48 on Februar 7th, 2013:

    Vielen Dank für das Feedback 🙂

    Mittlerweile bietet es sich an, zwecks Browserkompatibilität, JavaScript-Frameworks wie beispielsweise jQuery zu verwenden.

  24. 24 Sebastian Prodan said at 11:01 on Februar 16th, 2013:

    Auch von mir ein Lob.

    Ich sehe das mit der Browser-Kompatibilität anders: Lieber habe ich statt für 100% für die 90% gängigsten kompatibel (und verzichte dankend (!!) auf die Unterstützung der veralteten 10%), und spare dafür 80% an Code und / oder Bandbreite 🙂

    Kleiner Hinweis: In der Praxis sollte der eingegebene Wert natürlich überprüft werden, z.B. mit mysql_real_escape_string um MySQL Injection, einen Hackerangriff, vorzubeugen

  25. 25 jens said at 22:08 on März 19th, 2013:

    Echt gut erklährt, danke.

  26. 26 Uwe said at 18:53 on April 16th, 2013:

    Hallo, 😉
    Supertolles Script, wenn es doch nur auch bei mir laufen würde…

    Nach Eingabe des Suchwortes erhalte ich:

    Warning: mysql_fetch_object(): supplied argument is not a valid MySQL result resource in C:\xampp\htdocs\sites\ajax\suche.php on line 30

    Woran mag das liegen?

    Gruss, Uwe

  27. 27 Uwe said at 19:47 on April 16th, 2013:

    gelöst:
    Spalte in meiner Tabelle (mysql) umbenannt in „titel“

  28. 28 Sven said at 12:39 on September 26th, 2013:

    Hi,
    schönes Tutorial
    wollte mal fragen ob es eine möglichkeit gibt nach dem man suche.php mit javaskript aufgerufen die erhaltenen Informationen nicht mit echo im php-skript auf der website ausgibt sondern sie in javaskript weiter verarbeiten kann?

    Gruss sven

  29. 29 Sam said at 13:43 on Dezember 27th, 2013:

    Super Script. Aber wie kann ich die Ergebnisse mit Links verbinden?

  30. 30 heiko said at 21:30 on Februar 23rd, 2014:

    Du hast meinen Abend gerettet. Danke 😉

  31. 31 admin said at 20:36 on Februar 25th, 2014:

    Das freut mich zu hören 😉

  32. 32 Hans WURST said at 13:24 on April 22nd, 2014:

    Super… Komplett perfekt

  33. 33 Johna639 said at 20:02 on Juli 27th, 2014:

    You actually make it seem really easy together with your presentation but I in finding this matter to be really something that I feel I would by no means understand. It sort of feels too complex and extremely broad for me. I’m looking forward for your next publish, Ill try to get the cling of it! cgeaeckeddfg

  34. 34 Markus said at 16:28 on Januar 22nd, 2015:

    Hi, ich nutze die Suche um nach PLZ in meiner DB zu suchen. Wenn die Suche mit einer 0(Null) beginnt kommen keine Ergebnisse. Ich selbst konnte bisher nicht rausfinden warum das so ist. 🙁 Wäre für jede Hilfe dankbar. Lg

  35. 35 Markus said at 14:04 on Mai 4th, 2015:

    Habe die Funktion genutzt und auf folgender Seite verbaut. Läuft perfekt!
    http://www.leipziger-neuseenland-erleben.de/veranstaltungen

  36. 36 LeoDE said at 16:00 on Juli 6th, 2015:

    Hey,
    das Bild 3 fehlt leider.

  37. 37 Hey said at 15:05 on April 21st, 2016:

    alert(‚hallo‘)Hallo

  38. 38 เสื้อลูกไม้แฟชั่น said at 00:13 on September 7th, 2016:

    Definitely imagine that that you stated. Your favorite reason seemed to be at the web the simplest thing to
    take into accout of. I say to you, I definitely get annoyed while people think about issues that they
    just don’t recognise about. You controlled to hit the
    nail upon the top and outlined out the entire thing without
    having side effect , folks could take a signal.

    Will likely be back to get more. Thanks

  39. 39 bside said at 21:01 on Oktober 10th, 2016:

    Vielen Dank für diese gute Anleitung. Mir fehlt lediglich eine Kleinigkeit, die ich bisher noch nicht umsetzen konnte. Ich würde gerne eine in der DB enthaltene URL als clickable Link ausgeben. Hast Du dazu eventuell einen Tipp. Vielen Dank bside

  40. 40 bside said at 21:56 on Oktober 10th, 2016:

    EDIT:

    // Ergebnis wird ausgegeben mit Zeilenumbruch
    while($row = mysql_fetch_object($result)){
    echo utf8_encode($row->name);
    echo "<br/>";
    echo utf8_encode($row->nr);
    echo "<br/>";
    echo "<a href='$row->link' target='_blank'>Link</a>";

  41. 41 post223825251 said at 16:53 on Dezember 11th, 2016:

    Hi, I think your website might be having browser compatibility issues.
    When I look at your blog site in Chrome, it looks fine but
    when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up!

    Other then that, terrific blog!

  42. 42 kitty said at 21:50 on Juni 8th, 2017:

    Hallo, kann mir bitte jemand helfen!! Komme nicht zurecht, suche schon seit Tagen(bin Anfänger darum wäre ich dankbar um jede Hilfe)
    Bekomme folgenden Fehler: undefined index: suchbegriff in….on line 30

    Hab aber alles so übernommen wie es drinnen gestanden ist..

    Danke im Voraus

  43. 43 Yogi said at 14:26 on November 19th, 2017:

    Hallo,
    das Ergebnis der Suche wird ja in das HTML-Dokument geschrieben. Gibt es auch die Möglichkeit ein Suchergebnis in eine Variable zu schreiben um diese dann im Ausgangs-Dokument (index.php) zu verarbeiten?

  44. 44 fresh cc said at 04:57 on Oktober 8th, 2018:

    I have to thank you for the efforts you have put in writing this website.
    I am hoping to check out the same high-grade content by you later on as well.
    In truth, your creative writing abilities has encouraged me to get
    my very own blog now 😉

  45. 45 ศูนย์รักษาผู้มีบุตรยาก said at 05:30 on November 14th, 2019:

    ศูนย์รักษาผู้มีบุตรยากศูนย์รักษาผู้มีบุตรยาก โรงหมอจุฬารัตน์
    11 อินเตอร์

    ศูนย์รักษาผู้มีลูกยาก โรงหมอจุฬารัตน์ 11 อินเตอร์ : Chularat 11 IVF Center ตั้งด้วยความตั้งอกตั้งใจที่ช่วยทำให้คู่ชีวิตสามารถเอาชนะอุปสรรค สาเหตุจากสาเหตุต่างๆที่มีผลต่อการมีลูกยาก โดยกลุ่มแพทย์ผู้เชี่ยวชาญเฉพาะด้านรักษาการมีบุตรยากจากสถาบันที่เป็นที่รู้จักเป็นที่ยอมรับ ผ่านการเรียนรู้อบรมจากในและต่างชาติ และก็มีประสบการณ์มาเป็นเวลายาวนาน คอยให้คำแนะนำและดูแลผู้เจ็บป่วยอย่างครบวงจร โดยมีจุดประสงค์หลักเพื่อให้การเกื้อกูลคู่ควงที่มีปัญหาการมีลูกยาก ให้สามารถมีบุตรได้สมความหวัง ด้วยบริการทางเทคโนโลยีช่วยการเจริญวัยที่มีความล้ำยุคและก็มีมาตรฐานเป็นที่ยอมรับในระดับสากล
    ศูนย์รักษาผู้มีบุตรยาก
    ถ้าหากคุณแต่งงานมานานกว่า 1 ปี รวมทั้งร่วมเพศสม่ำเสมอแม้กระนั้นยังไม่ตั้งครรภ์ มีความหมายว่าคุณกำลังอยู่ใน „สภาวะการมีลูกยาก“ โดยหลักการแล้วถึงแม้ว่าภาวะนี้จะไม่ใช่โรค แต่ว่าก็เป็นปัญหาสำหรับคู่สมรสความคาดหวังอยากมีเจ้าตัวน้อย เพื่อความสมบูรณ์แบบของชีวิตครอบครัว การที่คู่รักไม่สามารถมีลูกได้อาจเป็นเพราะความแปลกอะไรบางอย่างที่ส่งผลต่อภาวการณ์การเจริญวัย ทำให้ไม่สามารถที่จะมีการปฏิสนธิได้ตามธรรมชาติ โดยอาจมีสาเหตุจากฝ่ายหญิงหรือฝ่ายชาย หรือทั้งสองฝ่าย ไหมรู้ปัจจัยศูนย์รักษาผู้มีบุตรยาก

  46. 46 sensibility said at 14:23 on März 30th, 2020:

    Vielen Dank! Perfekt, macht genau das was ich suchte!!

  47. 47 Severcov065 said at 12:00 on Mai 26th, 2020:

    Enter comment here.

  48. 48 frequency-drive.ru PPH48 said at 18:35 on Oktober 12th, 2020:

    Enter comment here.

  49. 49 indramat.ru ALZ079 said at 23:07 on November 6th, 2020:

    Enter comment here.

  50. 50 Frank W. said at 09:22 on März 17th, 2022:

    Nützlicher Artikel, danke! Ich arbeite gerade an der Seite zet casino https://zet-casino.de/ und nutzen alle modernen Technologien. Das Konzept des adaptiven Designs impliziert das Vorhandensein eines solchen Website-Designs, das es ermöglicht, Seiten auf jedem Bildschirmformat gleichermaßen korrekt anzupassen und zu laden.

Leave a Reply