I have a Div Tag which contains 4 child Div Tags

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

Now I would like to access these Child Div's using up and Down Arrow Keys through Javascript The above div is show on click of a TextBox.I want that the user can choose any of the child div and its selected value appears in the TextBox. I have acheived the end result by attachinh onClick event to each childDiv.

I have a Div Tag which contains 4 child Div Tags

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

Now I would like to access these Child Div's using up and Down Arrow Keys through Javascript The above div is show on click of a TextBox.I want that the user can choose any of the child div and its selected value appears in the TextBox. I have acheived the end result by attachinh onClick event to each childDiv.

• javascript
• html
• keyboard

Share Improve this question Follow edited Aug 15, 2018 at 8:04 Bhargav Rao 52.2k2929 gold badges127127 silver badges141141 bronze badges asked Dec 31, 2008 at 7:05 SandhurstSandhurst

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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 autoplete( 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 autoplete( 'tb', 'Parent' );
</script>

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

You're definitely looking for 'Autosuggest/Autoplete' 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 remend is using JQuery instead. JQuery has a very nice plugin for autoplete 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!

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?