Javascript keyboard events primer? (sau mai degrabă: ajută-mă cu dropdown personalizat)

Am nevoie de ajutor pentru a finaliza meniul meu construit ajax [div] dropdown dinamic.

Practic, am o cutie [de intrare] care; onkeyup rulează o căutare Ajax care returnează o mulțime de rezultate în div s și este redactată înapoi folosind innerHTML . Aceste coduri div s evidențiază onmouseover , astfel că o căutare tipică cu succes produce următoarea structură (iertați semicodul):

[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]

Funcționează .. frumos! arata elegant si este mult mai complet decat orice dropdown obisnuit (aceste rezultate div aduce o multime de informatii).

However, I'm missing the most of important functions behind regular HTML elements, that is, I can't keyboard down or up between "options". How do I do this? I know JavaScript handles keyboard events but; I haven't been able to find a good guide on how to do this. (Of course, the follow up question to this will eventually end up being: can I use to trigger that onclick event?)

0
fr hi bn

2 răspunsuri

În partea de sus a capului meu, cred că ar trebui să păstrați o formă de structură de date în JavaScript care să reflecte elementele din lista derulantă curentă. De asemenea, ați avea nevoie de o referință la elementul activ / selectat în prezent.

De fiecare dată când tasta sau keydown este declanșată, actualizați referința la elementul activ / selectat din structura de date. Pentru a furniza informații de evidențiere a interfeței utilizator, adăugați sau eliminați un nume de clasă care este desenat prin intermediul CSS, dacă elementul este activ / selectat sau nu.

De asemenea, acest lucru nu este un biggy, dar innerHTML nu este într-adevăr standard (căutați în createTextNode() , createElement > appendChild() pentru modalitățile standard de a crea date). De asemenea, este posibil să doriți să vedeți despre atașarea de agenți de procesare a evenimentelor în JavaScript, mai degrabă decât să faceți acest lucru într-un atribut HTML.

0
adăugat

Ce trebuie să faceți este să atașați ascultătorii de evenimente la div cu id = "results" . Puteți face acest lucru adăugând atributele onkeyup , onkeydown etc etc. la div când îl creați sau le puteți atașa utilizând JavaScript.

Recomandarea mea ar fi să folosiți o bibliotecă AJAX ca YUI , jQuery , prototip , etc. din două motive:

  1. Se pare că încercați să creați un Completare automată de control care este ceva ce majoritatea bibliotecilor AJAX ar trebui să ofere. Dacă puteți utiliza o componentă existentă, veți economisi mult timp.
  2. Chiar dacă nu doriți să utilizați controlul furnizat de o bibliotecă, toate bibliotecile oferă biblioteci de evenimente care ajută la ascunderea diferențelor dintre API-urile evenimentului oferite de diferite browsere.

Forget addEvent, use Yahoo!?s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.

Dacă articolul dvs. trece peste cap, aruncați o privire mai întâi la această documentație și apoi re-citit articolul original (am găsit articolul a făcut mai mult sens după ce am folosit biblioteca de evenimente).

Câteva alte lucruri:

  • Utilizarea JavaScript vă oferă mai mult control decât scrierea atributelor onkeyup etc în HTML. Dacă nu vrei să faci ceva foarte simplu aș folosi JavaScript.
  • Dacă vă scrieți propriul cod pentru a gestiona evenimentele tastaturii, bunul cod de referință este foarte util.
0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com