A: 

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?

Michael Bray
A: 

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

strager
Yes but I can't use AjaxControlToolKit or any Third Part Dll, so I have used XMLHttpRequest to generate this div. Any Help ??
JQuery is not a third party DLL, it is in pure javascript, you can definitely use it in your project if you're using javascript. Check my answer above.
Cyril Gupta
A: 

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!

Cyril Gupta
Well I am aware of the Saying..but thanks for ur suggestions
+2  A: 

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