2008-08-07 16 views
14

Tôi cần trợ giúp hoàn thành tùy chỉnh thả xuống dựa trên [div] tùy chỉnh động của tôi.Lớp phủ sự kiện bàn phím Javascript? (hay đúng hơn là: giúp tôi với danh sách thả xuống tùy chỉnh của tôi)

Về cơ bản, tôi có hộp [đầu vào]; onkeyup, chạy một tìm kiếm Ajax trả về một loạt các kết quả trong div s và được rút lại bằng cách sử dụng innerHTML. Những div s tất cả đều có điểm nổi bật onmouseover như vậy, một tìm kiếm thành công điển hình mang lại cơ cấu như sau (tha thứ bán-code):

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

Nó hoạt động .. đẹp! trông thanh lịch và là cách hoàn chỉnh hơn bất kỳ dropdown thường xuyên (những kết quả div mang lại rất nhiều thông tin).

Tuy nhiên, tôi thiếu nhiều chức năng quan trọng nhất đằng sau các phần tử HTML thông thường, nghĩa là tôi không thể tắt hoặc vuốt giữa "tùy chọn". Làm thế nào để tôi làm điều này? Tôi biết javascript xử lý các sự kiện bàn phím nhưng; Tôi đã không thể tìm thấy một hướng dẫn tốt về cách làm điều này. (Tất nhiên, câu hỏi tiếp theo cho điều này cuối cùng sẽ kết thúc là: tôi có thể sử dụng <ENTER> để kích hoạt sự kiện onclick đó không?)

Trả lời

4

Những gì bạn cần làm là đính kèm trình xử lý sự kiện vào div với id="results". Bạn có thể thực hiện việc này bằng cách thêm các thuộc tính onkeyup, onkeydown, v.v. vào số div khi bạn tạo hoặc bạn có thể đính kèm chúng bằng JavaScript.

Khuyến cáo của tôi sẽ được rằng bạn sử dụng một thư viện AJAX như YUI, jQuery, Prototype vv vì hai lý do:

  1. Có vẻ như bạn đang cố gắng để tạo ra một điều khiển Auto Complete mà là một cái gì đó hầu hết libaries AJAX nên cung cấp. Nếu bạn có thể sử dụng một thành phần hiện có bạn sẽ tiết kiệm cho mình rất nhiều thời gian.
  2. Thậm chí nếu bạn không muốn sử dụng điều khiển do thư viện cung cấp, tất cả thư viện đều cung cấp các thư viện sự kiện giúp che giấu sự khác biệt giữa các API sự kiện được cung cấp bởi các trình duyệt khác nhau.

Forget addEvent, use Yahoo!’s Event Utility cung cấp bản tóm tắt tốt về thư viện sự kiện sẽ cung cấp cho bạn những gì. Tôi khá chắc chắn rằng các thư viện sự kiện được cung cấp bởi jQuery, Prototype, et. al. cung cấp các tính năng tương tự.

Nếu bài viết đó đi qua đầu của bạn, hãy xem this documentation trước và sau đó đọc lại bài viết gốc (Tôi thấy bài viết có ý nghĩa hơn sau khi tôi đã sử dụng thư viện sự kiện).

Một vài điều khác:

  • Sử dụng JavaScript cho phép bạn kiểm soát nhiều hơn viết onkeyup, vv thuộc tính vào HTML của bạn. Trừ khi bạn muốn làm điều gì đó thực sự đơn giản Tôi sẽ sử dụng JavaScript.
  • Nếu bạn viết mã của riêng mình để xử lý các sự kiện bàn phím, good key code reference thực sự hữu ích.
0

Tắt đầu của tôi, tôi nghĩ rằng bạn cần duy trì một số biểu mẫu của cấu trúc dữ liệu trong JavaScript phản ánh các mục trong danh sách thả xuống hiện tại. Bạn cũng cần tham chiếu đến mục hiện đang hoạt động/đã chọn.

Mỗi lần keyup hoặc keydown được kích hoạt, cập nhật tham chiếu đến mục đang hoạt động/đã chọn trong cấu trúc dữ liệu. Để cung cấp thông tin làm nổi bật trên giao diện người dùng, hãy thêm hoặc xóa tên lớp được tạo kiểu qua CSS dựa trên liệu mục đó có đang hoạt động/được chọn hay không.

Ngoài ra, đây không phải là lớn, nhưng innerHTML không thực sự tiêu chuẩn (xem createTextNode(), createElement()appendChild() để biết cách tạo dữ liệu chuẩn). Bạn cũng có thể muốn xem về việc gắn trình xử lý sự kiện trong JavaScript thay vì làm như vậy trong một thuộc tính HTML.

Các vấn đề liên quan