الوصول إلى محتويات DIV باستخدام مفاتيح الأسهم لأعلى ولأسفل باستخدام JavaScript

Question

لدي علامة div التي تحتوي على 4 علامات div الطفل

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

الآن أرغب في الوصول إلى مفاتيح الأسهم لأعلى ولأسفل لأعلى ولأسفل عبر JavaScript ، يتم عرض Div أعلاه بنقرة مربع نص. أريد أن يختار المستخدم أيًا من Div Child وظهرت قيمته المحددة في مربع النص. لقد حققت النتيجة النهائية من خلال حدث anclick inclick إلى كل طفل.

Answer 1

هل تبحث عن ما يعرف باسم الانتهاء التلقائي أو اقتراحات؟

Answer 2

إليك حل مجاني للمكتبة لتبدأ.

قد ترغب في إضافة أحداث تختبئ وإظهار 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>

Answer 3

أنت بالتأكيد تبحث عن "AutoSuggest/Complete" ، وهذا يستغرق وقتًا طويلاً للتنفيذ بالكامل إذا كنت ترغب في القيام بذلك في JavaScript Pure ، ولكن نعم ، يمكنك استخدام المثال من Strager للبدء.

ما أوصي به هو استخدام jQuery في حين أن. JQuery لديه لطيف جدا البرنامج المساعد للإكمال التلقائي التي يمكنك استخدامها. لقد قمت للتو بتنفيذ في أحد مشاريعي قبل يومين ويبدو أنه يعمل بشكل جيد.

هناك قول مهم يجب أن تتذكره أثناء صنع البرامج-"لا تحاول إعادة اختراع العجلة".

إذا قام المبرمجون الآخرون بذلك بالفعل ، وهم لطيفون بما يكفي لمشاركته واستخدامه وشكرهم.

هتافات!

Answer 4

ماذا تقصد "الوصول إليهم بمفاتيح الأسهم"؟ يوجد نص في كل من divs ... لا يحتوي على أي عناصر تفاعل ، لذلك لوحة المفاتيح ليس لها صلة هنا. ربما تحتاج إلى توضيح سؤالك؟