Ankündigung

Einklappen
Keine Ankündigung bisher.

Auswahlliste

Einklappen

Unconfigured Ad Widget

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • stefan a
    hat ein Thema erstellt Auswahlliste.

    Auswahlliste

    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
    antwortet
    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.
    PHP-Code:
    <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.

    PHP-Code:
    <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.
    PHP-Code:
    <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:
    PHP-Code:
    /* Linkmenüs */
    #tagdialogbg { 
     
    positionabsolute
     
    top:10px
     
    bottom:10px
     
    left:20px
     
    right:20px
     
    z-index:1
    }
    #tagdialog { 
     
    positionabsolute
     
    left:50px
     
    z-index:2
     
    color#000;
     
    font-weightbold;
     
    font-familytahomaarialsans-serif;
     
    font-size100%;
     
    text-decorationnone;
    }
    div#tagdialog a:link

     
    text-decorationnone;
      
    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

    Einen Kommentar schreiben:

Lädt...
X