AJAX: Autovervollständigung Textbox

Salut zusammen,

ich schreibe mir gerade eine Linksliste in PHP. Für diese Links werden Tags eingegeben, mit denen man später die Liste durchsuchen kann. Das hat auch alles so geklappt, wie ich mir das vorgestellt habe.

Jetzt möchte ich noch ein weiteres Feature einbinden, und zwar:
Bei dem Eingabe eines neuen Links soll das Textfeld für die Tags eine Autovervollständigungsfunktion bieten, so wie ähnlich wie bei Google.
In der Theorie habe ich mir das so vorgestellt, dass ich beim generieren der HTML-Seite der JavaScript-Funktion einen String der Form "TAG1 TAG2 TAG3" übergebe. In der Textbox wird bei Eingabe eines neuen Tags (es können mehrere durch Space getrennt eingegeben werden) dann jeweils eine Liste mit passenden Tags angezeigt.

Leider habe ich von JavaScript aber überhaupt keine Ahnung.

Vielleicht kann mir jemand einen Beispielcode posten?

Danke im Voraus,

Stefan

Salut,

ich meine das Eingabefeld. Das Input Feld ist eine Funktion des Browsers, auch, dass er sich merkt, welche Texte ich eingeben habe.

Was ich meine ist, dass ich mehrere durch Space getrennte Stichworte in das Textfeld eingeben kann und mir die Seite jeweils Stichworte vorschlägt, die bereits bei anderen Eingaben verwendet wurden. Von PHP Seite kann ich die als String in den JavaScript-Teil der Seite einfügen, das ist nicht das Problem. Nur, wie der JavaScript-Teil aussehen muss.

Stefan

Nein,

irgendwie reden wir hier aneinander vorbei. Lass es mich an einem Beispiel erklären. Ich habe bei vorigen Eingaben folgende Stichwörter eingegeben:

Haus, Wetter, Auto, Spiegel, Tisch, Tröte, Trichter

Jetzt möchte ich eine neue Eingabe machen und dort die Tags Wetter, Tisch, Garten verwenden.

In meinem Browser gebe ich jetzt in das Tags-Feld ein:
W daraufhin erscheint Wetter als Vorschlag, ich wähle Wetter aus
T hier erscheinen Tisch, Tröte und Trichter als Vorschläge, also gebe ich weiter
i ein, jetzt erscheint nur noch Tisch als Vorschlag, den wähle ich.
Garten dafür gibt es noch keine Vorschläge.

Da ich im PHP-Skript doppelte Einträge herausfiltern werde, kann dann auch nicht mehr von prügeln gesprochen werden ;-).

Stefan

Salut,

da es sich bei mir um eigene Tags handelt, werden diese wohl kaum mehr als 50 werden. Google blendet sehr wohl oft gesuchte Anfragen in einer Liste unter der Textbox an. Das wird mittels XMLRequest realisiert. Aber ich will die Tags ja gar nicht vom Server nachladen, mir reicht es, wenn ich sie aus einem Array in der HTML-Datei hole.

Stefan

Salut,

hier ein Screenshot der entsprechenden Funktion bei Google:

Korrektur: hier ein Screenshot der vermeintlichen Funktion bei Google:
Korrektur der Korrektur: Und es ist doch eine Funktion von Google: Google Suggest

[Blockierte Grafik: http://vbtricks.vb.funpic.de/ztemp/google.png]

Warum das bei mir unter Windows (IE und Firefox) nicht, sondern nur im Firefox unter Linux tut, ist mir jetzt nicht klar. Das ist aber auch nicht relevant.

Korrektur: Das lag daran, dass auf der Google-Hauptseite diese Funktion noch nicht eingebunden ist und diese dann von einem PlugIn meines Browsers, dass ich nur unter Linux installiert hatte, nachgerüstet wurde.

Stefan

Salut,

okay, das war ein kalter, ein ganz kalter. Der Screenshot kommt nur zustande, wenn man die CustomizeGoogle-Extension für Firefox installiert hat. Es handelt sich also nicht um eine Standard-Funktion von Google. Da hab ich mich verrannt.

Korrektur: Es gibt diese Funktion doch direkt von Google, nämlich Google Suggest.

Das ändert aber nichts an der Realisierbarkeit einer derartigen Funktion, XMLHttpRequest existiert wirklich, die "zu vielen Ergebnisse" werden vom Server herausgefiltert. Aber das brauche ich ja gar nicht, ich habe ja mein Array. Einziges Problem, dass ich sehe ist die Anzeige der "Treffer", das müsste doch aber eigentlich auch mittels DHTML möglich sein.

Stefan

Salut,

Customize-Google gibt es hier:
https://addons.mozilla.org/firefox/743/

Wie und ob sich das dann aber auf eine Website übertragen lässt, weiß ich nicht. Mit dem Framework von Firefox kenne ich mich nicht aus.

Stefan

Salut,

das sieht nicht schlecht aus! Mir ist auch klar, was du da machst, bloß klappt es leider nicht. Der JavaScript-Debugger von Firefox behauptet, die Funktion check nicht gefunden zu haben. Das ist vermutlich irgendwo nur ein kleiner Fehler, ab ich find ihn leider nicht, scheine Tomaten vor den Augen zu haben. Für einen kleinen Denkansatz wäre ich dankbar.

Stefan

Mein HTML-Dokument (Das fett markierte habe ich auskommentiert, schien mir da nicht hinzupassen):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <script language="javascript1.1" type="text/jscript">
  <!--

  var content = new Array();
  content[]="Begriff1";
  content[]="Begriff2";
  content[]="Begriff3";



  function check( val )
  {
   val=val.toLowerCase();

   var anzeige = new Array();


   for(i=0 ; i<=content.length ; i++)
   {
    if (content[i].substr(0, val.length)==val)
    {
     anzeige[]=content[i];
    }
   }

   if (anzeige.length>0)
   {
    show_list(anzeige);
   }
  }

  function show_list(anzeige)
  {
   var augabe='';

   for(i=0 ; i<=anzeige.length ; i++) [b]//set_it[/b]
   {
    augabe+='[url='#']' + anzeige[i] + '[/url]
';
   }

   document.getElmentById('promptdiv').innerHTML=augabe;
   document.getElmentById('promptdiv').style.display = "block";
  }

  function set_it ( too )
  {
   document.getElmentById('suche').value=too;
   document.getElmentById('promptdiv').style.display = "none";
  }
  -->
  </script>
  <style type="text/css">
  #promptdiv {
     display:none;
     position:absolute;
     top:50%;
     left:50%;
     margin:-250px auto auto -200px;
     background-color:#aaa;
     width:200px;
     height:160px;
     padding:5px;
     border:2px outset #abc;
  }
  </style>
  </head>
  <body>
    <input type="text" id="suche" onkeypress="javascript:check(this.value);" />

    <div class="promptdiv">
    </div>


  </body>
</html>

Salut,

jetzt funktioniert es einwandfrei! Das werde ich jetzt noch etwas umbauen, aber das traue ich mir dann selbst zu ;-).

Die Idee mit dem Div war vor allem das, was mir fehlte. Da kannte ich mich zu wenig mit den Möglichkeiten bei DHTML aus.

Habe die beiden Versionen auch vom Texteditor vergleichen lassen, solche Fehler unterlaufen mir auch (# und class, . und id, Dimension Array). Ganz übel ist es in PHP, wo die Variablen nicht explizit deklariert werden müssen. Aber ich schweife vom Thema ab.

Meine modifzierte Lösung werde ich dann später auch posten.

Vielen Dank, das hat mir wirklich weitergeholfen,

Stefan

Salut,

das hab ich mir fast gedacht, nachdem du die Eingabe erst mal mit toLowerCase behandelst

So, ich habe die Funktion jetzt meinen Bedürfnissen entsprechend umgebaut. Was ich alles verändert habe:

• Eingabe mehrerer Tags (diese sind durch Space getrennt)
• Der Focus wird nach Auswählen des Tags wieder zurück in die Textbox gesetzt.
• Die Vorschläge werden gleich beim Laden angezeigt

Damit ist der Thread von mir aus dann erfolgreich beantwortet. Danke nochmal.

Stefan

Hier also die neue Version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <script language="javascript1.1" type="text/javascript">
  <!--
 
  // array containing default tags
  var tags = new Array();
  tags[0] = "begriff1";
  tags[1] = "begatte..";
  tags[2] = "beo";
 
  // check input for possible tags
  function check(val)
  {
   val = val.toLowerCase();

   // only last tag
   if(val.indexOf(" ") > -1)
   {
    val = val.substr(val.lastIndexOf(" ") + 1);
   }

   var matchingTags = new Array();

   // find matching tags
   for(i = 0; i < tags.length; i++)
   {
    if (tags[i].substr(0, val.length) == val)
    {
     matchingTags.push(tags[i]);
    }
   }

   if (matchingTags.length > 0)
   {
    show_list(matchingTags);
   }
  }
 
  // display list of possible tags
  function show_list(matchingTags)
  {
   var content = '';

   for(i = 0; i < matchingTags.length; i++)
   {
    content += '[url='#']' + matchingTags[i] + '[/url]
';
   }

   // write matching tags back to HTML doc
   document.getElementById('promptdiv').innerHTML = content;
   document.getElementById('promptdiv').style.display = "block";
  }
 
  // copy tag to input box
  function addtag(too)
  {
   var tagsString = document.getElementById('tags').value;

   // remove last entered tag-start
   if(tagsString.indexOf(" ") > -1)
   {
    tagsString = tagsString.substr(0, tagsString.lastIndexOf(" ") + 1);
   }
   else
   {
    tagsString = "";
   }

   // rewrite tags input box
   document.getElementById('tags').value = tagsString + too + " ";
   document.getElementById('promptdiv').style.display = "none";

   // reset focus to input box
   document.getElementById('tags').focus();

   // for the next tag
   check(document.getElementById('tags').value);
  }
  -->
  </script>
  <style type="text/css">
  #promptdiv {
     display:none;
     position:absolute;
     top:50%;
     left:50%;
     margin:-250px auto auto -200px;
     background-color:#aaa;
     width:200px;
     height:160px;
     padding:5px;
     border:2px outset #abc;
  }
  </style>
  </head>
  <body onload="javascript:check('');">
    <input type="text" id="tags" onKeyUp="javascript:check(this.value);" />

    <div id="promptdiv">
    </div>


  </body>
</html>