Kết hợp đầu vào và chọn vào một trường nhập có thể nhìn thấy

Tôi mới tạo kiểu phần tử html (ví dụ: nhập & chọn trong trường hợp này) và tôi đang tìm cách triển khai phần tử nhập/chọn kết hợp trực quan. Về bản chất, đầu vào và lựa chọn sẽ vẫn hoàn toàn tách biệt thành các phần tử biểu mẫu, nhưng dựa trên lớp và css tôi muốn chèn nội dung của menu chọn vào bên phải của trường nhập. Xin lỗi tôi không photoshoper, vì vậy đây là một đại diện của những gì nó có thể trông giống như:Kết hợp đầu vào và chọn vào một trường nhập có thể nhìn thấy

------------------------------------------------ 
|        Select text [v] | 
------------------------------------------------

Như bạn có thể nhìn thấy phần tay trái của đầu vào là nơi bạn sẽ gõ chuỗi cho các yếu tố đầu vào, và chọn thả xuống là inset vào biên giới của các yếu tố đầu vào ([v] được coi là một nút mũi tên xuống để thả danh sách). Bất kỳ liên kết đến cách để có được phong cách nhìn chằm chằm một cái gì đó như thế này hoặc đề nghị được chào đón.

Nguồn

2011-11-28 somecallmemike

Vì vậy, về cơ bản một hộp văn bản bạn có thể gõ vào và có được một danh sách phù hợp với khả năng từ một danh sách thả xuống? –

nếu những gì marc b mô tả bạn có thể muốn chỉ sử dụng một chuyên gia dữ liệu – albert

@Marc, không thực sự. Tôi muốn có một đầu vào, và một thả xuống. Trình đơn thả xuống sẽ là các cụm từ tìm kiếm như "khách hàng, danh bạ, số điện thoại" và văn bản đầu vào sẽ liên quan đến bất kỳ cụm từ tìm kiếm nào bạn đang chọn. Tôi chỉ có thể đặt một đầu vào trên màn hình, sau đó thả xuống bên cạnh nó và thực hiện điều tương tự, nhưng tôi muốn chèn menu chọn vào biên giới đã chọn vì tôi nghĩ nó trông thực sự trơn. – somecallmemike

vì vậy, điều này?

http://jqueryui.com/demos/autocomplete/#combobox

Nguồn

2011-11-28 21:42:30 mccow002

Điều gì đó như thế này sẽ thực hiện những gì bạn muốn.

http://jsfiddle.net/rhoenig/xFQMf/

Nguồn

2011-11-28 21:44:36 Robert

Điều này dường như không hoạt động trong firefox của tôi. – Qqwy

@Qqwy nếu bạn nhấp vào liên kết, bạn có thấy phần kết quả có văn bản/hộp được di chuyển sang phải không? Nếu vậy, bạn có thể chỉnh sửa câu hỏi để hiển thị tệp của bạn trông như thế nào. – Robert

Tôi không thấy lựa chọn nào cả. Tôi thấy nhãn span và hộp nhập liệu. Không có lựa chọn nào. – Qqwy

Ví dụ sau đây là rất đơn giản. Nó cho thấy điều chính bạn sẽ muốn làm: Vì các phần tử biểu mẫu có thể được tạo kiểu với CSS giống như mọi thứ khác, nó khá đơn giản. Ví dụ này vẫn có một số vấn đề về kiểu dáng với các trình duyệt không phải firefox, tôi sẽ cải thiện nó một chút.

<html> 
<head> 
    <style> 
     select#selectoption { 
      border-left:none; 
      padding:none; 
     } 

     input#datahere { 
      position:relative; 
      border-right:none; 
      padding:none; 
     } 
     </style> 
    </head> 
<body> 
    The form below is a simple example. 
<form name ="explanation"action="test" method="post"> 
<input type="text" id="datahere" /> 
<select id="selectoption" /><option>test</option><option>test2</option></select> 

</form> 


</body> 
</html>

EDIT: Một ví dụ trực tuyến những gì bạn muốn có thể được nhìn thấy ở đây: http://jsfiddle.net/xFQMf/3/

Nguồn

2011-11-28 21:53:28 Qqwy

Có một thư viện bạn có thể thử: https://github.com/eredacokmerke/dm-i

Nguồn

2014-12-11 12:53:24 user4757345