Hallo meine lieben Freunde. Hier habe ich mal für euch eine Autovervollständigungssuche mit AJAX. Also so was wie bei google wenn das kleine Fensterlein nach unten aufgeht.
Das ganze holt sich seine Daten von einer PHP - Datei. Die ich gerade leider nicht liefern kann...Aber es ist eigentlich ganz easy. In der PHP - Datei müsst ihr eure Suchwörter nach Plausibilität einfach dem Script zurückgeben. Das macht ihr am besten wenn ihr euch eine Wortliste generiert von eurer Seite und diese dann mit dem Eingegebenen Wort vergleicht, aber nicht im direkten vergleich weil sonst ja nur die Wörter angezeigt würden die genau eurem Eingabestring entsprechen, am besten ihr wendet auf diese Wörter noch die "Koelner Phonetic" an und dann benutzt ihr noch den "Levenshtein" Algorithmus der schon in PHP verfügbar ist.
Achja die Rückgabe Ergebnisse müssen im JSON - Format vorliegen. Und da das ganze auf einen Shop abgestimmt war kann man bei den Ergebnissen Artikel, Preis und Bild anzeigen lassen.
So hier der Source Code:
[hide]
Search = function(x, y, width, height, scroll, limit, mode, imagepath, inputId, rootDiv) {
var acWindow = null;
var x = x;
var y = y;
var limit = limit;
var regname = regname;
var width = width;
var imagepath = imagepath;
var height = height;
var inputId = inputId;
var http = null;
var keyCount = -1;
var keyCountHistory = 0;
var scroll = scroll;
var mode = mode;
var rootDiv = rootDiv;
var overAC = false;
var lastActive = 0;
var childCounter = 0;
var inputField = null;
var searchWord = "";
this.setAutocompleteWindow = function() {
acWindow = document.createElement("div");
acWindow.setAttribute("id", "acWindow");
acWindow.style.position = "absolute";
acWindow.style.left = x + "px";
acWindow.style.top = y + "px";
if(height != "auto" && height.indexOf("%") == -1) {
height = height + "px";
}
acWindow.style.height = height;
acWindow.style.width = width + "px";
acWindow.style.display = "none";
if(scroll == 1) {
acWindow.style.overflowY = "scroll";
}
document.getElementById(rootDiv).appendChild(acWindow);
inputField = document.getElementById(inputId);
inputField.onkeydown = function(event) { keyboardControl(event); doSubmit(); }
inputField.onkeyup = function(event){ getElements(event); }
inputField.setAttribute("autocomplete", "off");
inputField.ondblclick = function() { if(acWindow.childNodes.length > 0) { acWindow.style.display = "block"; } }
acWindow.oncontextmenu = function() { return false; }
acWindow.onmouseover = function() { mouseControl(); }
document.getElementsByTagName("body")[0].onclick = function(event) { if(acWindow.style.display == "block") { acWindow.style.display = "none"; acWindow.scrollTop = 0; } }
document.onclick = function() { acWindow.style.display = "none"; }
}
addACElement = function(int_id, name, preis) {
childCounter = 0;
childBody = document.createElement("div");
childBody.className = "acChildBody";
childBody.id = childCounter;
childBody.onmouseover = function() { this.className = "acChildBody_hover"; lastActive = this }
childBody.onmouseout = function() { this.className = "acChildBody"; }
if(mode == "1" || mode == "2" || mode == "3") {
childName = document.createElement("div");
childName.className = "acChildname";
childName.innerHTML = name;
childName.onclick = function() { location.href = "index.php?artike="+int_id; }
childName.goTo = function() {
location.href = "index.php?artike="+int_id;
}
childBody.appendChild(childName);
}
if(mode == "2" || mode == "3") {
childImage = document.createElement("div");
childImage.className = "acChildimage";
childImage.innerHTML = "<img src=\""+imagepath+int_id+"/0.jpg\" border=\"0\" />";
childBody.appendChild(childImage);
}
if(mode == "3") {
childPreis = document.createElement("div");
childPreis.className = "acChildpreis";
childPreis.innerHTML = preis+" EUR";
childBody.appendChild(childPreis);
}
if(name != null) {
childCounter++;
return childBody;
}
}
flushElements = function() {
acWindow.innerHTML = "";
keyCount = -1;
keyCountHistory = 0;
acWindow.scrollTop = 0;
}
doSubmit = function() {
if(lastActive.className != "acChildBody_hover" || lastActive == 0) {
inputField.parentNode.onsubmit = function() { return true; }
}
}
mouseControl = function() {
if(overAC == false) {
count = acWindow.childNodes.length;
for(i=0; i < count; i++) {
acWindow.childNodes[i].className = "acChildBody";
}
overAC = true;
}
}
keyboardControl = function(e) {
if(overAC == true) {
keyCount = lastActive.id;
keyCountHistory = lastActive.id;
}
overAC = false;
if(acWindow.style.display == "block") {
if(!e) { e = window.event; }
if(e.keyCode == 13 && lastActive.className == "acChildBody_hover") {
inputField.parentNode.onsubmit = function() { return false; }
acWindow.childNodes[keyCount].childNodes[0].goTo();
}
if(e.keyCode == 40 || e.keyCode == 38) {
if(e.keyCode == 40) {
keyCount++;
}else if(e.keyCode == 38) {
keyCount--;
}
try {
nodeHistory = acWindow.childNodes[keyCountHistory];
nodeHistory.className = "acChildBody";
}catch(e) {
//
}
nodeCount = acWindow.childNodes.length;
if(keyCountHistory <= 0 && e.keyCode == 38) {
keyCount = nodeCount-1;
}
if(keyCount >= nodeCount && e.keyCode == 40) {
keyCount = 0;
}
try {
node = acWindow.childNodes[keyCount];
lastActive = node;
node.className = "acChildBody_hover";
}catch(e) {
//
}
try {
if(node.childNodes[0].innerHTML != "...") { inputField.value = node.childNodes[0].innerHTML; } else { inputField.value = searchWord; };
}catch(e) {
//
}
if(scroll == 1) {
if(e.keyCode == 40) {
if(acWindow.offsetHeight < (keyCount+1) * acWindow.childNodes[keyCount].offsetHeight) {
acWindow.scrollTop += acWindow.childNodes[keyCount].offsetHeight;
}
if(keyCountHistory >= nodeCount-1) {
acWindow.scrollTop = 0;
}
}
if(e.keyCode == 38) {
if(keyCountHistory <= 0) {
acWindow.scrollTop = acWindow.scrollHeight + acWindow.childNodes[keyCount].offsetHeight;
}else {
if(keyCount != acWindow.childNodes.length - 2) {
acWindow.scrollTop -= acWindow.childNodes[keyCount].offsetHeight;
}
}
}
}
keyCountHistory = keyCount;
}
}
}
getElements = function(e) {
if(!e) { e = window.event; }
if(e.keyCode != 40 && e.keyCode != 38) {
searchWord = inputField.value;
acWindowHeight = 0;
acWindow.scrollTop = 0;
search = inputField.value;
if(search.length >= 3) {
if(http == null) {
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if(http != null) {
try {
http.open("GET", "index"+".php?q="+search, true);
http.onreadystatechange = function() {
getJSON();
};
http.send(null);
}catch(z) {
//
}
}
}else {
acWindow.style.display = "none";
}
}
}
getJSON = function() {
childs = new Array();
if(http.readyState == 4) {
try {
result = eval("("+http.responseText+")");
reslen = result.length;
childCounter = 0;
} catch(e) {
reslen = 0;
}
for(i=0; i < reslen; i++) {
data = result[i];
childs[i] = addACElement(data.int_id, data.name, data.preis);
}
flushElements();
for(i=0, clen=childs.length; i < clen; i++) {
acWindow.appendChild(childs[i]);
}
if(reslen > 0) {
setMoreButton();
acWindow.style.display = "block";
}else {
acWindow.style.display = "none";
}
}
}
setMoreButton = function() {
inner = document.createElement("div");
outer = document.createElement("div");
outer.className = "acChildBody";
inner.className = "acChildname";
inner.innerHTML = "...";
outer.onmouseover = function() { this.className = "acChildBody_hover"; }
outer.onmouseout = function() { this.className = "acChildBody"; }
inner.onclick = function() { inputField.parentNode.submit(); }
inner.goTo = function() {
inputField.parentNode.submit();
}
outer.appendChild(inner);
acWindow.appendChild(outer);
}
}
Alles anzeigen
[/hide]
Das hier mal was in die AJAX Section kommt...;-)
MfG Ladies