Accessing div content with up and down arrow keys using javascript
I have a Div tag that 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 Divs using the up and down arrow keys using Javascript The above div is shown on click of the TextBox. I want the user to be able to select any child div and its selected value appears in the TextBox. I achieved the end result by attinh onClick app for each childDiv.
Here's a free free library solution.
You might want 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, i.e.)
<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>
source to share
You are definitely looking for "Autosuggest / Autocomplete". It's quite time consuming to fully implement if you want to do it in pure javascript, but yes, you can use this example from strager to get started.
I recommend using JQuery . JQuery has a very nice autocomplete plugin that you can use. I just implemented in one of my projects a couple of days ago and seems to be working fine.
There's an important saying to keep in mind when building software - "Don't try to reinvent the wheel."
If other programmers have already done it and they are kind enough to share, use it and thank it.
Hooray!
source to share