1

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.

Improve this question

4 Answers 4

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 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

2 Comments

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

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!

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.