Thành phần tìm kiếm bootstrap 5
Hộp tìm kiếm là một phần tử UI được chuẩn bị để tạo các công cụ tìm kiếm. Phần tử quan trọng nhất của nó là đầu vào tìm kiếm, nhưng nó cũng có thể chứa các biểu tượng hoặc nút. Nó cũng được điều chỉnh để được sử dụng trong các thành phần khác như Navbar, thả xuống, bảng, chọn, sidenav và nhiều thành phần khác.
Ví dụ cơ bản
Một ví dụ cơ bản với một nút đơn giản.
Biến thể
Tìm kiếm đi kèm với nhiều biến thể. Chọn từ những điều sau khi cần thiết:
- Tìm kiếm với biểu tượng
- Tìm kiếm bằng nút
- Tìm kiếm mà không cần thêm các yếu tố
Tìm kiếm với biểu tượng
Tìm kiếm bằng nút
Tìm kiếm bằng nút
Tìm kiếm mà không cần thêm các yếu tố
Tìm kiếm mà không cần thêm các yếu tố
Xem tất cả các biểu tượng có sẵn trong tài liệu biểu tượng.
Xem tất cả các kết hợp đầu vào có thể có trong các tài liệu nhóm đầu vào.
Dưới đây là một ví dụ về cách bạn có thể tạo thành phần tìm kiếm mà không có bất kỳ phần tử nào được đính kèm:
Sự kiện tìm kiếm
Dưới đây là ví dụ làm thế nào bạn có thể tạo thành phần tìm kiếm với sự kiện trên đó sẽ bắn sau khi nhấp vào nút tìm kiếm.
Tự động hoàn thành
Bằng cách thêm mã JS bổ sung, bạn cũng có thể thực hiện đầu vào tìm kiếm của mình tự động hoàn thành.
Tìm hiểu thêm về tự động hoàn thành trong tài liệu tự động hoàn chỉnh
Tiêu điểm
Bạn có thể làm cho đầu vào của mình trong thành phần tìm kiếm có thể tập trung bằng cách nhấn phím tắt ctrl + alt. Bạn có thể dễ dàng thay đổi kết hợp các phím tắt bằng cách sửa đổi mảng keys trong mã JS. Ví dụ: để thay đổi ControlLeft thành khóa <div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div> 0 chỉ cần trao đổi nó thành <div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div> 1, v.v.
Thanh điều khiển
Tìm kiếm dễ dàng được tích hợp với nhiều thành phần của chúng tôi như Navbar.
Tìm hiểu thêm về Navbar trong tài liệu Navbar
Thả xuống
Hơn nữa, bạn có thể tích hợp tìm kiếm của chúng tôi với thành phần thả xuống
Tìm hiểu thêm về thả xuống trong các tài liệu thả xuống
Bảng dữ liệu
Nó hoạt động hoàn hảo với MDB DataTables.
Tìm hiểu thêm về DataTables trong tài liệu DataTables
Lựa chọn
Bạn cũng có thể tìm thấy tùy chọn tìm kiếm trong chọn đầu vào bằng cách thêm vào chọn thuộc tính <div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div> 2
Tìm hiểu thêm về Chọn trong các tài liệu chọn
Sidenav
Bootstrap 5 Beta - (Cập nhật 2021)
<div class="input-group"> <input class="form-control border-end-0 border rounded-pill" type="text" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3" type="button"> <i class="fa fa-search"></i> </button> </span> </div>Thử nghiệm
Bootstrap 4 (câu trả lời ban đầu)
Tại sao không sử dụng một nhóm đầu vào?input-group?
<div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div>Và, bạn có thể làm cho nó xuất hiện bên trong đầu vào bằng cách sử dụng các đường viền ..., you can make it appear inside the input using the border utils...
<div class="input-group col-md-4"> <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary border-left-0 border" type="button"> <i class="fa fa-search"></i> </button> </span> </div>Hoặc, sử dụng <div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div> 3 w/o nền màu xám để biểu tượng xuất hiện bên trong đầu vào ..., using a <div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div> 3 w/o the gray background so the icon appears inside the input...
<div class="input-group"> <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div> </span> </div>Thay phiên, bạn có thể sử dụng lưới (____ 14> ________ 15) Không có khoảng cách máng xối:, you can use the grid (<div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div> 4><div class="input-group col-md-4"> <input class="form-control py-2" type="search" value="search" id="example-search-input"> <span class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-search"></i> </button> </span> </div> 5) with no gutter spacing:
<div class="row no-gutters"> <div class="col"> <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4"> </div> <div class="col-auto"> <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button"> <i class="fa fa-search"></i> </button> </div> </div>Hoặc, mong đợi biểu tượng như thế này ... the icon like this...
<div class="input-group"> <span class="input-group-prepend"> <div class="input-group-text bg-transparent border-right-0"> <i class="fa fa-search"></i> </div> </span> <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" /> <span class="input-group-append"> <button class="btn btn-outline-secondary border-left-0 border" type="button"> Search </button> </span> </div>Bản demo của tất cả các tùy chọn đầu vào biểu tượng Bootstrap 4icon input options
Ví dụ với các biểu tượng xác thực