✔ Problem bei der Einbindung einer Google-Suggest-ähnlichen Funktion

[schoener_nick]

Hallo zusammen!

Für die Suchfunktion auf einer Website habe ich eine Google-Suggest-Ähnliche Vorschlagsfunktion eingebaut. Da ich selbst aber eigentlich nur mit PHP programmiere und mit Javascript sehr wenig Erfahrung habe, habe ich das ganze mit viel Rumprobieren und unter Verwendung eines fremden Codes hingekriegt. Jetzt taucht allerdings ein Problem auf, das ich mit Rumprobieren nicht lösen kann. Vielleicht kann mir von Euch ja jemand weiterhelfen.

Ich werde zunächst das Problem beschreiben und dann die nötigen Quellcodes anhängen.

Das Problem:

Wenn man in das Suchfeld etwas eingibt findet im Hintergrund (über Ajax) ein Datenbank-Request statt, der sinnvolle Suchbegriffe zurückgibt. Diese werden dann in einem Dropdownfeld unter dem Textfeld angezeigt und wenn man einen Begriff auswählt, wird dieser in das Textfeld eingetragen. Das dürfte allen von Google-Suggest bekannt sein.

Eigentlich funktioniert das auch, allerdings nicht, wenn der vorgeschlagene Suchbegriff ein "&-Zeichen" enthält. Im Dropdownmenü wird z. B. "Meyer & Söhne" angezeigt, wählt man es aber aus, wird ins Textfeld "Meyer & Söhne" geschrieben. Natürlich findet der Suchende nichts, wenn er diesen Suchbegriff nun bestätigt. Ich habe ein kleines Suchformular gebastelt, das nichts enthält, was nichts mit dem Problem zu tun hat, um Euch das ganze besser demonstrieren zu können. Jetzt wird komischerweise sogar im Dropdownmenü alles ab dem "&" abgeschnitten. Warum das nun wieder passiert, weiß ich schon gar nicht...

Da ich selbst nicht besonders viel Javascript kann, habe ich den größten Teil des Codes fertig übernommen. Der Code ist offensichtlich nicht dafür gemacht, in ihm Fehler zu suchen. Ich hoffe trotzdem, dass jemand von Euch vielleicht irgendeine Idee hat, wie ich das Problem beheben kann.

Unter folgender URL könnt Ihr Euch mal mein Problem anschauen:

http://development.stubermedia.com/suggest-problem/index.htm

Eigentlich ist alles, was es zu sehen gibt direkt in der index.htm enthalten. Es findet der Aufruf eines PHP-Skriptes über Ajax statt. Das PHP-Skript gibt unabhängig von Eurer Eingabe immer dasselbe zurück, damit Ihr das Problem auch seht.

Die Ajax-Rückgabe lautet:

sendRPCDone(frameElement, "me", new Array("meyer & söhne", "meyer's söhne"), new Array("", ""), new Array ("", ""));



Ich bin für alles dankbar, was mir irgendwie ein Stück weiterhilft. Ich selbst komm hier gar nicht mehr weiter.

 

[Sven Mintel]

Hallo,

• Suche im Skript dieses:

var Y=ia[ c].innerHTML;if(Y==" ")return"";

und ersetze es hierdurch

var Y=ia[ c].firstChild.data;if(Y==" ")return"";

Diese Änderung bewirkt, dass in das Input nicht der HTML-Code der Auswahl, sondern die sichtbaren Zeichen der Auswahl eingesetzt werden.(das &-Problem)

• In dem String, den das PHP-Skript zurückliefert, müssen Leerzeichen durch  
  ersetzt werden, und Sonderzeichen/Umlaute/etc. durch ihre HTML-Entsprechungen.
  
  aus

Meyer & Söhne

sollte also bspw.

Meyer & Söhne

werden.

Ist nur so ein Vorschlag...selbst bei Google werden keine & in den Vorschlägen berücksichtigt, soweit ich sehe


Hier übrigens das fast identische Skript, unkomprimiert und kommentiert: http://www.p2pnet.net/stuff/justusearch.txt (©2004 by Google)

P.S.:
Danke für die ansprechend formulierte und formatierte Fragestellung, da kann man garnicht anders als zu Antworten

 

[schoener_nick]

Herzlichen Dank!

Ich hab mich bemüht, meine Frage gut zu formulieren und auch zu formatieren, wie jemand allerdings tatsächlich die relevante Stelle in dem doch recht unübersichtlichen Quellcode finden konnte, fasziniert mich ;-)

Was leider nicht funktioniert hat, war die Lösung mit "ia[c].firstChild.data". Ich vermute, dass die Suchbegriffvorschläge nicht korrekt in das DOM eingehängt wurden und daher so nicht ansprechbar sind.

Ich habe nun stattdessen ein Skript gesucht, das HTML-Entities zurückwandeln kann und dieses nun an dieser Stelle auf den String angewandt.

Das Skript war ursprünglich nur darauf ausgelegt, Htmlentities zu erzeugen. Ich habe das Skript dann so umgeschrieben, dass es eben das Gegenteil macht.

String.prototype.htmlEntities = function()
{
  var chars = new Array ('&','à','á','â','ã','ä','å','æ','ç','è','é',
                         'ê','ë','ì','í','î','ï','ð','ñ','ò','ó','ô',
                         'õ','ö','ø','ù','ú','û','ü','ý','þ','ÿ','À',
                         'Á','Â','Ã','Ä','Å','Æ','Ç','È','É','Ê','Ë',
                         'Ì','Í','Î','Ï','Ð','Ñ','Ò','Ó','Ô','Õ','Ö',
                         'Ø','Ù','Ú','Û','Ü','Ý','Þ','€','\"','ß','<',
                         '>','¢','£','¤','¥','¦','§','¨','©','ª','«',
                         '¬','','®','¯','°','±','²','³','´','µ','¶',
                         '·','¸','¹','º','»','¼','½','¾');

  var entities = new Array ('amp','agrave','aacute','acirc','atilde','auml','aring',
                            'aelig','ccedil','egrave','eacute','ecirc','euml','igrave',
                            'iacute','icirc','iuml','eth','ntilde','ograve','oacute',
                            'ocirc','otilde','ouml','oslash','ugrave','uacute','ucirc',
                            'uuml','yacute','thorn','yuml','Agrave','Aacute','Acirc',
                            'Atilde','Auml','Aring','AElig','Ccedil','Egrave','Eacute',
                            'Ecirc','Euml','Igrave','Iacute','Icirc','Iuml','ETH','Ntilde',
                            'Ograve','Oacute','Ocirc','Otilde','Ouml','Oslash','Ugrave',
                            'Uacute','Ucirc','Uuml','Yacute','THORN','euro','quot','szlig',
                            'lt','gt','cent','pound','curren','yen','brvbar','sect','uml',
                            'copy','ordf','laquo','not','shy','reg','macr','deg','plusmn',
                            'sup2','sup3','acute','micro','para','middot','cedil','sup1',
                            'ordm','raquo','frac14','frac12','frac34');

  newString = this;
  for (var i = 0; i < chars.length; i++)
  {
    myRegExp = new RegExp();
    myRegExp.compile(chars[i],'g')
    newString = newString.replace (myRegExp, '&' + entities[i] + ';');
  }
  return newString;
}

Da das Skript nicht von mir ist, hier noch der Link zum Original:
http://www.dieterraber.net/jsStringFuncs.htm


Herzlichen Dank nochmal an Sven!