Доступ к содержимому Div с помощью клавиш со стрелками вверх и вниз с помощью javascript

Что значит «получить к ним доступ с помощью клавиш со стрелками»? В каждом из div есть текст ... они не содержат никаких элементов взаимодействия, поэтому клавиатура здесь не имеет значения. Может нужно уточнить свой вопрос?

Вы ищете то, что известно как автозаполнение или предложения?

Вы определенно ищете «Автозаполнение / Автозаполнение». Это довольно трудоемко для полной реализации, если вы хотите сделать это в чистом javascript, но да, вы можете использовать пример из strager для начала.

Я рекомендую вместо этого использовать JQuery. В JQuery есть очень хороший плагин для автозаполнения, который вы можете использовать. Я только что реализовал один из своих проектов пару дней назад, и, похоже, он работает нормально.

При создании программного обеспечения вы должны помнить одно важное высказывание: «Не пытайтесь изобретать колесо».

Если другие программисты уже сделали это, и они достаточно любезны, чтобы поделиться, использовать и поблагодарить их.

Ваше здоровье!

Вот бесплатное решение для библиотеки, которое поможет вам начать.

Вы можете добавить события, которые скрывают и отображают div, когда текстовое поле получает или теряет фокус. Возможно, [esc] следует отменить выбор? (Я не тестировал это в 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>