Access Div Contents using Up and Down Arrow Keys using javascript

Answer 1

What do you mean "access them with arrow keys"? There is text in each of the divs... they don't contain any interaction elements, so keyboard has no relevance here. Maybe you need to elaborate your question?

Answer 2

Are you looking for what is known as auto-completion or suggestions?

Answer 3

You're definitely looking for 'Autosuggest/Autocomplete' This is rather time-consuming to implement fully if you want to do it in pure javascript, but yes, you could use the example from strager to get started.

What I recommend is using JQuery instead. JQuery has a very nice plugin for autocomplete that you can use. I just implemented in one of my projects a couple of days ago and it seems to work fine.

There's an important saying that you must remember while making software -- 'Don't try to re-invent the wheel.'

If other programmers have done it already, and they are kind enough to share, use it, and thank them.

Cheers!

Answer 4

Here's a library free solution to get you started.

You might like to add events that hide and show the div when the textbox gains or loses focus. Perhaps [esc] should clear the selection? ( I haven't tested it in ie )

<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>