كيفية المفاتيح أسفل أو بين المنسدلة "خيارات" ؟

StackOverflow https://stackoverflow.com/questions/4884

سؤال

لدي بنيت العرف اياكس [شعبة] على أساس ديناميكية المنسدلة.

لدي [إدخال] صندوق; onkeyup, يدير اياكس البحث التي تقوم بإرجاع النتائج في divs و يتم رسمها مرة أخرى باستخدام innerHTML.هذه divكل ما قد يسلط الضوء على onmouseover لذا نموذجية ناجحة البحث ينتج البنية التالية (العفو شبه رمز):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

أنه يعمل.

ومع ذلك, أنا في عداد المفقودين الوظائف الهامة وراء العادية عناصر HTML.لا أستطيع لوحة المفاتيح أسفل أو بين "خيارات".

أنا أعرف جافا سكريبت مقابض أحداث لوحة المفاتيح ولكن ؛ لم أكن قادرة على العثور على دليل جيد.(بالطبع متابعة المسألة في نهاية الأمر:هل يمكنني استخدام <ENTER> لتحريك أن onclick الحدث؟)

هل كانت مفيدة؟

المحلول

ما عليك القيام به هو إرفاق المستمعين الحدث إلى div مع id="results".يمكنك القيام بذلك عن طريق إضافة onkeyup, onkeydown, ، وما إلى ذلك.سمات div عند إنشاء أو يمكنك إرفاق هذه باستخدام جافا سكريبت.

توصيتي أن استخدام AJAX المكتبة مثل YUI, مسج, النموذج, ، وما إلى ذلك.لسببين:

  1. يبدو أنك تحاول خلق السيارات كاملة التحكم الذي هو شيء آخر اياكس libaries ينبغي أن تقدم.إذا كان يمكنك استخدام القائمة مكون عليك إنقاذ نفسك الكثير من الوقت.
  2. حتى إذا كنت لا تريد استخدام عنصر التحكم التي تقدمها مكتبة جميع المكتبات توفر الحدث المكتبات التي تساعد على إخفاء الخلافات بين الحدث واجهات برمجة التطبيقات التي توفرها متصفحات مختلفة.

ننسى addEvent استخدام Yahoo!'s الحدث فائدة يوفر ملخصا جيدا ما حدث المكتبة أن توفر لك.أنا متأكد من أن هذا الحدث المكتبات التي تقدمها مسج, نموذج, et.al.تقدم ميزات مشابهة.

إذا يذهب هذا المقال فوق رأسك إلقاء نظرة على هذه الوثائق أولا ثم إعادة قراءة المقالة الأصلية (لقد وجدت هذه المادة من المنطقي أكثر بعد كنت تستخدم مكتبة الحدث).

بضعة أشياء أخرى:

  • باستخدام جافا سكريبت يتيح لك المزيد من السيطرة من الكتابة onkeyup الخ.سمات في HTML الخاص بك.إلا إذا كنت تريد أن تفعل شيئا حقا بسيطة وأود أن استخدام جافا سكريبت.
  • إذا كان يمكنك كتابة التعليمات البرمجية الخاصة بك للتعامل مع لوحة المفاتيح الأحداث جيد مفتاح رمز المرجعية هو مفيد حقا.

نصائح أخرى

من على قمة رأسي ، أعتقد أن كنت بحاجة للحفاظ على شكل هيكل البيانات في جافا سكريبت التي تعكس العناصر الحالية في القائمة المنسدلة.سوف تحتاج أيضا إشارة إلى نشطة حاليا/العنصر المحدد.

في كل مرة keyup أو keydown أطلقت تحديث الإشارة إلى نشطة/العنصر المحدد في بنية البيانات.لتوفير تسليط الضوء على المعلومات على واجهة المستخدم إضافة أو إزالة الطبقة اسم نصب عن طريق CSS على أساس إذا كان العنصر النشط/المختارة أم لا.

أيضا هذا ليس بيغي ، ولكن innerHTML ليس حقا القياسية (انظروا إلى createTextNode(), createElement(), ، appendChild() القياسية طرق إنشاء البيانات).قد تحتاج أيضا إلى رؤية حول ربط معالجات الأحداث في جافا سكريبت بدلا من القيام بذلك في HTML السمة.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top