Thay đổi giá trị đầu vào trong HTML5 datalist

Question

<input type="text" list="numbers"> 

<datalist id="numbers"> 
    <option value="110"> 
    <option value="111"> 
    <option value="112"> 
    <option value="113"> 
    <option value="114"> 
    <option value="115"> 
</datalist> 

http://jsfiddle.net/shvPB/

Kịch bản: bắt đầu
1. Người sử dụng để viết bất kỳ tùy chọn giá trị hoặc mũi tên xuống/lên, và danh sách thả xuống cho thấy các tùy chọn.
2. Người dùng mouseclicks hoặc enterclicks trên một trong các tùy chọn, và quan trọng: cô ấy vẫn có thể di chuyển lên/xuống danh sách.
3. Người dùng nhấp vào bên ngoài trường nhập. Trường nhập không còn tập trung nữa.
4. Người dùng muốn thay đổi lựa chọn của mình và nhấp vào trường nhập nhưng các tùy chọn không hiển thị nữa.

Tôi cũng có thể hiển thị các tùy chọn ở bước 4 như thế nào?

Answer 1

Đây là một giải pháp cụ thể mà nên làm việc cho các nhu cầu của bạn ... (sử dụng jQuery) ...:

Tóm tắt: Hãy yếu tố chọn giống như của riêng bạn, sao chép giá trị từ <datalist> với nó. Sau đó, liên kết 2 sự kiện để nhập: hiển thị/ẩn trên tiêu điểm/làm mờ. Và thêm sự kiện vào mọi phần tử tùy chọn giống như để chuyển một giá trị trên click() vào đầu vào. Nó sẽ là một phần tử tiết kiệm sẽ hiển thị khi không có menu thả xuống của <datalist>. Có một điều phức tạp - việc biến mất được thực hiện bởi setTimeout, vì sự kiện focusout (blur) được kích hoạt sớm hơn sự kiện nhấp chuột ...

Fiddle được tạo cho đến thời điểm này: http://jsfiddle.net/xPx2Z/3/ :)/* chrome look-a-like dropdown */

BTW: bạn không thể có "true" <select> đã mở và vẫn còn focus() ed trên đầu vào, vì vậy giải pháp với yếu tố <select> là không tốt. Vì vậy, tôi đã cập nhật câu trả lời một chút :)