"livesuche"

Webdesign & Technik HTML & CSS
1

hallo,

kennt jemand ein verständliches tutorial für eine “livesuche” wie zb bei youtube.
also sobald man was in die suche eingibt einem sachen vorgeschlagen werden?

lg julian

2

Sowas wird es kaum als Tutorial geben, aber ich kann dir einige Links anbieten:
-JS um die Daten einzutragen: de.selfhtml.org/javascript/
-AJAX um die Daten vom Server zu holen: ajax.frozenfox.at/
-PHP um die Suche auszuführen (etwas mehr als Grundkenntnisse)

und div. Suchmechanismen, je nachdem wonach du suchen willst:
-MySQL: dev.mysql.com/doc/refman/5.1/en/ … earch.html

-Vorgegebene Suchbegriffe mit Tippfehlerkorrektur: at2.php.net/manual/de/function.levenshtein.php
-oder wo auch immer du suchen willst :wink:

3

Hi technikfreak,

ich habe so eine Suche schon mal geschrieben, sie wird vielleicht nicht exakt für deine Bedürfnisse passen, aber du kannst sie ja anpassen:

Du brauchst im Grunde vier Dateien:

Datei: XMLHttpRequest.js

var xmlHttpObject = false;

// Überprüfen ob XMLHttpRequest-Klasse vorhanden und erzeugen von Objekte für IE7, Firefox, etc.
if (typeof XMLHttpRequest != 'undefined') 
{
    xmlHttpObject = new XMLHttpRequest();
}

// Wenn im oberen Block noch kein Objekt erzeugt, dann versuche XMLHTTP-Objekt zu erzeugen
// Notwendig für IE6 oder IE5
if (!xmlHttpObject) 
{
    try 
    {
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) 
    {
        try 
        {
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) 
        {
            xmlHttpObject = null;
        }
    }
}
Datei: functions.js

function sendUserRegisterRequest() {
	var uname = document.getElementById("username").value;
	xmlHttpObject.open('GET', 'seitemitsuchscript.php?username='+uname);
	xmlHttpObject.onreadystatechange = handleUserSearchResponse;
	xmlHttpObject.send(null);
}

function handleUserSearchResponse() {
	if (xmlHttpObject.readyState < 4) {
		document.getElementById("result").innerHTML = '<p>Laden...</p>';
	}
	if (xmlHttpObject.readyState == 4) {
		document.getElementById("result").innerHTML = xmlHttpObject.responseText;
	}
}
Datei: seitemitsuchscript.php

<?php
Hier steht eine MySQL-Abfrage z.B.
$username = $_GET['username'];
$sql = "SELECT username FROM user WHERE username LIKE %'$username'%";
....
?>
Datei: suchseite.html

<html>
<head>
<script type="text/javascript" src="XMLHttpRequest.js"></script>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<input type="text" name="username" id="username" onKeyUp="sendUserRegisterRequest()">
<p id="result"></p>
</body>
</html>

Hoffe ich konnte mit den Scripts weiterhelfen. Musst halt die Suchanfrage an deine Bedürfnisse anpassen!

4

zur Erklährung von amityville’s Skript:

Datei XMLHttpRequest.js erstellt den AJAX-Request an den Server
Datei functions.js fängt den AJAX-Request ab und verwendet Javascript (JS) um die Ergebnisse einzutragen
Datei seitemitsuchscript.php empfängt den AJAX-Request und gibt die Lösungen zurück
Datei suchseite.html ist einfach die Webseite, auf der gesucht wird :wink:

Eigentlich ganz einfach :wink:

@anon53793166: Schönes Beispielskript, nicht zu aufwendig und leicht verständlich :wink:

5

Danke michi7x7, ihr habt mir jetzt schon bei so vielen Problemen mit Beispielscripts aus der Patsche geholfen, jetzt bin ich langsam soweit, dass ich was zurückgeben kann :slight_smile:
:bp: