Greifen Sie mit JavaScript mit den Auf und Ab -Pfeiltasten auf Div -Inhalt zu

Question

Ich habe ein Div -Tag, das 4 Kinder -Div -Tags enthält

 
   <Div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
  </Div>

Jetzt möchte ich über JavaScript auf diese untergeordneten Divs zugreifen, indem Sie auf ein Textfeld klicken. Ich möchte, dass der Benutzer einen der untergeordneten Divs auswählen kann und der ausgewählte Wert im Textfeld angezeigt wird. Ich habe das Endergebnis durch Attachinh Onclick -Event an jede Kinderdiv erreicht.

Answer 1

Suchen Sie nach dem, was bekannt ist Autovervollständigung oder Vorschläge?

Answer 2

Hier ist eine freie Lösung für Bibliothek, um Ihnen den Einstieg zu erleichtern.

Möglicherweise möchten Sie Ereignisse hinzufügen, die das Div verstecken und anzeigen, wenn der Textbox gewinnt oder den Fokus verliert. Vielleicht sollte [ESC] die Auswahl klären? (Ich habe es nicht in IE getestet)

<style>div.active{ background: red }</style>

<input type="text" id="tb">

<div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
</div>
<script type="text/javascript">


function autocomplete( textBoxId, containerDivId ) {
    var ac = this;
    this.textbox     = document.getElementById(textBoxId);
    this.div         = document.getElementById(containerDivId);
    this.list        = this.div.getElementsByTagName('div');
    this.pointer     = null;

    this.textbox.onkeydown = function( e ) {
        e = e || window.event;
        switch( e.keyCode ) {
            case 38: //up
                ac.selectDiv(-1);
                break;
            case 40: //down
                ac.selectDiv(1);
                break;
        }
    }

    this.selectDiv = function( inc ) {
        if( this.pointer !== null && this.pointer+inc >= 0 && this.pointer+inc < this.list.length ) {
            this.list[this.pointer].className = '';
            this.pointer += inc;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
        if( this.pointer === null ) {
            this.pointer = 0;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
    }
} 

new autocomplete( 'tb', 'Parent' );
</script>

Answer 3

Sie suchen auf jeden Fall nach "autosuggest/autocomplete". Dies ist ziemlich zeitaufwändig, um vollständig zu implementieren, wenn Sie es in reinem JavaScript tun möchten.

Was ich empfehle, ist zu verwenden JQuery stattdessen. JQuery hat eine sehr schöne Plugin für automatische Vervollständigung das können Sie verwenden. Ich habe gerade vor ein paar Tagen in einem meiner Projekte implementiert und es scheint gut zu funktionieren.

Es gibt ein wichtiges Sprichwort, an das Sie sich erinnern müssen, während Sie Software erstellen: "Versuchen Sie nicht, das Rad neu zu erfinden."

Wenn andere Programmierer es bereits getan haben und sie freundlich genug sind, es zu teilen, zu verwenden und ihnen zu danken.

Prost!

Answer 4

Was meinst du damit "greifen Sie mit Pfeiltasten" auf sie zu? Es gibt Text in jedem der Divs ... sie enthalten keine Interaktionselemente, daher hat die Tastatur hier keine Relevanz. Vielleicht musst du deine Frage ausarbeiten?