PHP Forum - Coding Board
April 20, 2018, 11:29:03 *
Willkommen Gast. Bitte einloggen oder registrieren.

Einloggen mit Benutzername, Passwort und Sitzungslänge
News:
 
   Übersicht   Hilfe Suche Einloggen Registrieren  
Seiten: [1]
  Drucken  
Autor Thema: [B] Autocomplete Search  (Gelesen 79 mal)
0 Mitglieder und 1 Gast betrachten dieses Thema.
Ph0xEn
Jr. Member
**
Beiträge: 62


Profil anzeigen E-Mail
« am: Juli 19, 2009, 02:15:41 »

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]
Code:
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 = &quot;<img src=\&quot;&quot;+imagepath+int_id+&quot;/0.jpg\&quot; border=\&quot;0\&quot; />&quot;;
childBody.appendChild(childImage);
}
if(mode == &quot;3&quot;) {
childPreis = document.createElement(&quot;div&quot;);
childPreis.className = &quot;acChildpreis&quot;;
childPreis.innerHTML = preis+&quot; EUR&quot;;
childBody.appendChild(childPreis);
}
if(name != null) {
childCounter++;
return childBody;
}

}
flushElements = function() {
acWindow.innerHTML = &quot;&quot;;
keyCount = -1;
keyCountHistory = 0;
acWindow.scrollTop = 0;
}
doSubmit = function() {
if(lastActive.className != &quot;acChildBody_hover&quot; || 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 = &quot;acChildBody&quot;;
}
overAC = true;
}
}
keyboardControl = function(e) {
if(overAC == true) {
keyCount = lastActive.id;
keyCountHistory = lastActive.id;
}
overAC = false;
if(acWindow.style.display == &quot;block&quot;) {
if(!e) { e = window.event; }
if(e.keyCode == 13 && lastActive.className == &quot;acChildBody_hover&quot;) {
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 = &quot;acChildBody&quot;;
}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 = &quot;acChildBody_hover&quot;;
}catch(e) {
//
}
try {
if(node.childNodes[0].innerHTML != &quot;...&quot;) { 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(&quot;Microsoft.XMLHTTP&quot;);
}
}
if(http != null) {
try {
http.open(&quot;GET&quot;, &quot;index&quot;+&quot;.php?q=&quot;+search, true);
http.onreadystatechange = function() {
getJSON();
};
http.send(null);
}catch(z) {
//
}
}
}else {
acWindow.style.display = &quot;none&quot;;
}
}
}
getJSON = function() {
childs = new Array();
if(http.readyState == 4) {
try {
result = eval(&quot;(&quot;+http.responseText+&quot;)&quot;);
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 = &quot;block&quot;;
}else {
acWindow.style.display = &quot;none&quot;;
}
}
}
setMoreButton = function() {
inner = document.createElement(&quot;div&quot;);
outer = document.createElement(&quot;div&quot;);
outer.className = &quot;acChildBody&quot;;
inner.className = &quot;acChildname&quot;;
inner.innerHTML = &quot;...&quot;;
outer.onmouseover = function() { this.className = &quot;acChildBody_hover&quot;; }
outer.onmouseout = function() { this.className = &quot;acChildBody&quot;; }
inner.onclick = function() { inputField.parentNode.submit(); }
inner.goTo = function() {
inputField.parentNode.submit();
}
outer.appendChild(inner);
acWindow.appendChild(outer);
}
}

[/hide]

Das hier mal was in die AJAX Section kommt...;-)

MfG Ladies
Gespeichert
Seiten: [1]
  Drucken  
 
Gehe zu:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2009, Simple Machines | New Look by Nolt Prüfe XHTML 1.0 Prüfe CSS