Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: AJAX Livesuche



Ranking: +2   Kommentare: 3   |   Bewertung: Keine Berechtigung!  

Vorwort



Hallo und herzlich willkommen ;)
In diesem Tutorial wird eine Live-Suchfunktion für ein Online Telefonbuch gebastelt.
Das ganze kann natürlich auch für andere Datenbanken benutz werden. Dafür müssen nur ein paar angaben geändert werden :P
Live bedeutet, das während man eine Eingabe in ein input Feld schreibt bereits nach dem eingegebenen Namen gesucht wird.

Für dieses Tutorial setze ich folgendes vorraus:
- HTML - Kenntnisse im Umgang mit Formularen
- Javascript Grundkenntnisse
- kenntnisse zum erzeugen eines requests an den Server ;)

Frontend



Das Frontend besteht ganz simpel aus einem kleinen Spruch und einem Eingabe Feld.
Nebenbei wird im <head> Bereich der Seite die JavaScript Datei "suggest.js" eingebunden und in einem weiteren <script> Tag ein "window.onkeyup" - Event-Handler eingefügt, dazu jedoch gleich mehr.
Und natürlich noch die style Datei style.css in das Dokument eingebunden

HTML - Frontend.html


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Telefonbuch</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="style.css" type="text/css">

    <script language="JavaScript" src="suggest.js"></script>

    <script language="JavaScript"> window.onkeyup = eingabeAuswerten; </script>

</head>

<body>

    <form name="f">

        <span id="telefonbuch">

            Geben Sie den Namen der Person ein:<br />

            <input name="person" type="text" size="30">

        </span>

        <span id="antwort"></span>

    </form>

</body>

</html>



CSS - style.css


Code:


#antwort {

    position:absolute;

    top: 100px;

    left: 190px;

    visibility: hidden;

}

#telefonbuch {

    position: absolute;

    top: 60px;

    left: 190px;

}



Als nächstes kommen wir zur Backend Datei die für die Ausgabe der Daten verantwortlich ist.

Backend


Nun hier im Backend haben wir folgende aufgaben: Eine Verbindung zur Datenbank herstellen, den eingegebenen Begriff in der Datenbank suchen und das ganze in einer Tabelle ausgeben.
Dazu benötigen wir aber zuerst einmal eine Tabelle in einer Datenbank.

SQL Code


Code:


CREATE TABLE telefonbuch(

     t_id INT NOT NULL AUTO_INCREMENT,

     PRIMARY KEY( id ),

     t_vorname VARCHAR( 20 ) ,

     t_nachname VARCHAR( 20 ) ,

     t_nummer VARCHAR ( 20)

)



PHP - backend.php


Code:


<?php

mysql_connect
("host","benutzername","passwort");

mysql_select_db("datenbankname");

$sql_query mysql_query("SELECT * FROM telefonbuch WHERE t_vorname LIKE '%".$_GET['person']."%' OR t_nachname LIKE '%".$_GET['person']."%'  ORDER BY t_id DESC LIMIT 0,10");

echo 
'<tr><td>Vorname</td><td>Nachname</td><td>Telefonnummer</td></tr>';

    if(
mysql_num_rows($sql_query) != 0){

        while(
$row mysql_fetch_array($sql_query)){

            echo 
'<tr>';

            echo 
'<td>'.$row['t_vorname'].'</td><td>'.$row['t_nachname'].'</td><td>'.$row['t_nummer'].'</td>';

            echo 
'</tr>';

        }

    }else{ echo
'<tr><td colspan="3">Es gab leider keine Ergebnisse.</td></tr>'; }

    echo 
'</table>';


Erklärung: zuerst kontaktieren wir die Datenbank. Anschließend senden wir die Abfrage an die Datenbank, die folgendes aussagt: Wir suchen alle Einträge unseres Telefonbuches, bei denen der Vorname oder der Nachname ungefähr folgendermaßen aussieht: Vor dem von uns eingegebenen Namen kann ein (oder mehrere) Buchstabe(n) stehen, muss aber nicht. Dann kommt der von uns eingegebene Name. und danach kann wieder ein (oder mehrere) Buchstabe(n) folgen.
Nachdem wir die Abfrage gesendet haben, wird mit der If Abfrage gefragt, mindestens ein Ergebnis zurückgeliefert wird. Wenn diese Bedingung zutrift, wird eine while Schleife durchlaufen in der jedes Element durchlaufen wird und der Vorname, der Nachname und die Nummer ausgegeben wird.

Zum Schluss kommt noch die "Brücke" zwischen Frontend und Backend: die Datei suggest.js!

Bridge


Ich setzte jetzt grade mal vorraus, das ihr Kenntnisse zum erzeugen eines HttpRequests besitzt :)

es gab ja in unserem Frontend Dokument window.onkeyup = eingabeAuswerten; diesen Aufruf.
window ist die Referenz auf unser Dokument, in Verbindung mit onkeyup und dem Rest des Aufrufes wird bewirkt das, sobald eine Taste gedrückt wurde die Funktion eingabeAuswerten aufgerufen wird.

CSS - suggest.js


Code:


function makeHttpRequest() {

    var resObjekt = null;

    try {

            resObjekt = new ActiveXObject("Microsoft.XMLHTTP");

        }

    catch(Error) {

        try {

            resObjekt = new ActiveXObject("MSXML2.XMLHTTP");

        }

        catch(Error) {

            try {

                resObjekt = new XMLHttpRequest();

            }

            catch(Error) {

                alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");

            }

        }

    }

    return resObjekt;

}

var resObjekt = makeHttpRequest();

 

function eingabeAuswerten() {

        if(document.f.person.value != "") {

        resObjekt.open('get', 'suggest.php?person=' + escape(document.f.person.value.toLowerCase()), true);

        resObjekt.onreadystatechange = suchePerson;

        resObjekt.send(null);

    } else {

        document.getElementById('antwort').style.visibility = "hidden";

    }

}

function suchePerson() {

    document.getElementById('antwort').style.visibility = "visible";

    if(resObjekt.readyState == 4) {

        document.getElementById('antwort').innerHTML = resObjekt.responseText;

    }

}


In der funktion eingabeAuswerten wird ein Request auf die datei suggest.php abgesetzt. mit übergeben wird der Inhalt des Feldes person (document.f.person.value).
Sobald das ganze bereit ist (resObjekt.onreadystatechange) wird die funktion suchePerson augerufen.
In dieser Funktion wiederum wird zuerst der Bereich in dem der Zurückgegebene String ausgegeben werden soll sichtbar geschaltet (document.getElementById('antwort').style.visibility = "visible";) und anschließend wird wenn der Request erfolgreich war (if(resObjekt.readyState == 4) {}) der zurückgegebene String in den #antwort div geschrieben (document.getElementById('antwort').innerHTML = resObjekt.responseText;)


Ich hoffe ich konnte euch das System etwas näher bringen. bei Fragen zögert nicht zu fragen ;)

Veröffentlicht von: MuffiTehMaeh
Veröffentlicht am: 22 Mar. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: AJAX Livesuche


Themenverwandte Tutorials


Kommentar(e) (3)


Crash sagt:

Einige Bemerkungen dazu:
- besser kein HTML per XMLHttpRequest übertragen, sondern nur Daten. Damit lässt sich besser arbeiten
- Das Request sollte abgebrochen werden, wenn eine Eingabe erfolgt, das PHP-Script kann entsprechend reagieren -> weniger Last am Server
- Es sollte immer ein neues XMLRequest-Objekt erzeugt werden und somit die global vermieden werden
- Manipulation des Style-Objekts vermeiden und lieber className ("hidden") setzen, dann kann man besser stylen
- try...catch um ein XMLHttpRequest-Objekt zu erzeugen ist unpassend und ist hinderlich beim Debuggen

// edit
- name="" ist für <form> lange missbilligt
- nach <form> dürfen nicht direkt Inline-Elemente folgen

Zuletzt bearbeitet am: 30 Apr. 2009 23:31:02

30 Apr. 2009 23:29:14 • Antworten


deleted_1456821596 sagt:

Dieser Beitrag wurde leider gelöscht!

Zuletzt bearbeitet am: 9 Apr. 2009 02:05:44

8 Apr. 2009 19:28:19 •


AweSome! sagt:

Super ;)
Genau sowas hab ich gebraucht. Vielen Dank


22 Mar. 2009 21:02:48 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder