Auswahlliste

[stefan a]

Hallo zusammen,

ich überlege mir, ob das folgende geht und wie ich die Umsetzung anfange:
Der Extrakt:
wie kann ich eine Liste anzeigen und aus dieser 1-n Einträge selektieren, um sie in ein INPUT/Textfeld einzutragen.


Ich habe ein Eingabefeld vom Typ input/text. In dieses möchte ich Werte eintragen, aus eine Liste von Worten, die der User früher schon mal in dieses Feld eingetragen hat. Mit diesen Worten sollen die Einträge nachher kategorisiert werden.
Da ich auf dem Bildschirm nicht sehr viel Platz für die Liste vergeuden will, mehrere Einträge selektierbar sein sollen und auch 'on the fly' neue Worte eingetragen werden können, dachte ich an ein javascript object, welches sich -ähnlich der kleinen Kalender, die man immer einblendet, um das Datum auszuwählen - an einer vorzugebenden Stelle einblendet.

Befüllt wird die Liste beim laden mit Werten aus der DB.
Beim absenden des Formulars wird Serverseitig erkannt, ob es neue Worte, die der Lister dieses Users hinzugefügt werden, um beim nächsten Mal bereit zu stehen. An anderer Stelle bekommt der Nutzer die Möglichkeit die Kategorien zu bereinigen.

VIEL TXT; Sorry dafür.

Wonach kann ich für dieses Thema suchen?
Hat jemand eine Idee, wie ich das umsetzen kann?

Vielen Dank
Gruß Stefan

[stefan a]

Erster Lösungsansatz

Hi, ich habe das nun mal so versucht und bitte um Bewertung:

Zuerst einmal habe ich einen Dialog gebaut, der als CSS DIV unsichtbar über meiner Seite klebt und die auswählbaren Kategorieen trägt.

<div id="tagdialog" style="display: none;">
 <table>
    <tr>
       <td>
         <a href="#" onClick="addentry('Privat')" target="_self"> Privat </a>
       </td>
    <tr>
    <tr>
       <td>
         <a href="#" onClick="addentry('dienstlich')" target="_self"> dienstlich </a>
       </td>
    <tr>
    <tr>
       <td>
         <a href="#" onClick="addentry('Perle')" target="_self"> Perle </a>
       </td>
    <tr>
    <tr>
       <td>
         <HR width="100%">
       </td>
    <tr>
    <tr>
       <td align="right">
         <a href="#" onClick="hidetags()" target="_self"> close </a>
       </td>
    <tr>
 </table>
</div> 

(der wird dynamich auf grund der bisher gesammelten Kategorieen aufgebaut)

Diesen Bereiche kann ich mit den folgenden javascripts anzeigen oder ausblenden.

<script language="javascript" type="text/javascript"> 
 function showtags() { 
  obj=document.getElementById('tagdialog'); 
   obj.style.display="block"; 
 } 
</script> 
<script language="javascript" type="text/javascript"> 
 function hidetags() { 
  obj=document.getElementById('tagdialog'); 
   obj.style.display="none"; 
 } 
</script> 

Klicke ich einen Eintrag im Dialog an, wird er in das Textfeld mit blank getrennt eingefügt; clicke ich 'close' an, verschwindet das DIV.

<script language="javascript" type="text/javascript"> 
 function addentry(tagtoadd) { 
  document.entry.entrytags.value=document.entry.entrytags.value + " " + tagtoadd;
 } 
</script> 

Der vollständigkeit halber meine Styles dazu:

/* Linkmenüs */
#tagdialogbg { 
 position: absolute; 
 top:10px; 
 bottom:10px; 
 left:20px; 
 right:20px; 
 z-index:1; 
}
#tagdialog { 
 position: absolute; 
 left:50px; 
 z-index:2; 
 color: #000;
 font-weight: bold;
 font-family: tahoma, arial, sans-serif;
 font-size: 100%;
 text-decoration: none;
}
div#tagdialog a:link
{ 
 text-decoration: none;
  font-weight:bold;
  color:#394529;
  font-size:18px;
} 

Damit bin ich nun auch schon so ziemlich zufrieden....
Ist das Eurer meinung nach altbacken oder brauchbar?
Gruß Stefan