Chào mừng bạn đến với blog Code With Random. Trong bài viết này, chúng tôi tạo một thanh tìm kiếm đang hoạt động. Chúng tôi sử dụng mã dự án Html, Css và JavaScript cho Thanh tìm kiếm
Hy vọng bạn thích blog của chúng tôi, vì vậy hãy bắt đầu với cấu trúc HTML cơ bản cho thanh Tìm kiếm
Mã theoN/ADự án Liên kết tải xuống có sẵn bên dướiNgôn ngữ được sử dụngHTML, CSS và JavaScriptLiên kết bên ngoài / Phụ thuộcCÓPhản hồiCÓBảng thanh tìm kiếmChơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây
Mã HTML cho thanh Tìm kiếm
Hidden Search
Có tất cả mã html cho thanh Tìm kiếm. Bây giờ, bạn có thể thấy đầu ra mà không cần mã Css và Javascript. Sau đó, chúng tôi viết Css và Javascript cho Thanh tìm kiếm của mình
Portfolio Website Sử Dụng HTML CSS Và JAVASCRIPT [ Mã Nguồn]
Đầu ra Html thanh tìm kiếm
Mã CSS cho thanh Tìm kiếm
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'];
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient[90deg, #7d5fff, #7158e2];
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.search {
position: relative;
height: 50px;
}
.search .input {
background-color: #fff;
border: 0;
font-size: 18px;
padding: 15px;
height: 50px;
width: 50px;
transition: width 0.3s ease;
}
.btn {
background-color: #fff;
border: 0;
cursor: pointer;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
transition: transform 0.3s ease;
}
.btn:focus,
.input:focus {
outline: none;
}
.search.active .input {
width: 200px;
}
.search.active .btn {
transform: translateX[198px];
}Bây giờ chúng ta đã hoàn thành phần css cho thanh tìm kiếm. Đây là đầu ra được cập nhật của chúng tôi với html và css cho thanh tìm kiếm
Đầu ra thanh tìm kiếm Html css
Bây giờ hãy thêm javascript để mở và đóng thanh Tìm kiếm, sau đó chúng tôi tìm kiếm bất kỳ thứ gì trong thanh Tìm kiếm
Mã Javascript cho thanh Tìm kiếm
const search = document.querySelector['.search']
const btn = document.querySelector['.btn']
const input = document.querySelector['.input']
btn.addEventListener['click', [] => {
search.classList.toggle['active']
input.focus[]
}]Kết quả cuối cùng Thanh tìm kiếm
5+ dự án HTML CSS với mã nguồn
Bây giờ chúng ta đã hoàn thành phần javascript cho thanh Tìm kiếm. Đây là đầu ra được cập nhật của chúng tôi với mã Html, Css và Javascript cho thanh tìm kiếm. Hy vọng bạn thích thanh tìm kiếm
Bạn có thể xem video đầu ra và ảnh chụp màn hình dự án. Xem các blog khác của chúng tôi và thu thập kiến thức về phát triển front-end. Cảm ơn bạn
Trong bài đăng này, chúng ta tìm hiểu cách tạo thanh tìm kiếm ẩn bằng cách sử dụng html & css và javascript đơn giản. Nếu chúng tôi làm sai hoặc nhầm lẫn, vui lòng gửi bình luận để trả lời hoặc giúp bạn dễ học
Tìm kiếm các mục cụ thể bằng thanh tìm kiếm là một tính năng rất phổ biến trong các trang web hiện đại và có thể thực hiện rất dễ dàng
Though search bars can be coded in many languages, the perks of coding it in JavaScript are that since JS is built-in, you can implement it using a simple tag, and secondly, JS search bars provide instant results, not requiring the user to reload the page or go to any other page.
Thanh tìm kiếm mẫu trên trang web dựa trên sách
Trong hướng dẫn này, bạn sẽ học cách tạo một thanh tìm kiếm rất đơn giản với JS và HTML
Bài viết này giả định rằng bạn có hiểu biết cơ bản về các ngôn ngữ sau
- JavaScript
- HTML
Bạn sẽ cần những điều sau đây
- Trình chỉnh sửa mã [Tôi sử dụng VSCode]
Bắt đầu nào
Bước 0 — Bộ sưu tập các mục/phần tử
Đảm bảo rằng bạn có một bộ sưu tập các mục/yếu tố để tìm kiếm thông qua. Các phần tử này có thể là các mục danh sách, div hoặc bất kỳ thứ gì có thể có thuộc tính lớp. Tất cả những thứ này phải có cùng thuộc tính lớp [tất cả chúng phải cùng loại]
Thí dụ
Bước 1 — Thêm thanh tìm kiếm
Bây giờ bạn đã có một danh sách các thành phần để tìm kiếm, bạn có thể bắt đầu tạo thanh tìm kiếm của mình
The search bar will be a very simple tag with a few attributes as given below:
Ở đây, điểm quan trọng là thuộc tính oninput của chúng ta, thuộc tính này về cơ bản sẽ chạy chức năng tìm kiếm của chúng ta mỗi khi người dùng thay đổi giá trị của đầu vào. Hàm tìm kiếm này sẽ lấy một tham số là giá trị của thanh tìm kiếm [viết thường]
Bước 2 — Chức năng tìm kiếm
Bây giờ chúng ta sẽ triển khai hàm JS thực tế sẽ tìm kiếm thông qua các phần tử để lấy kết quả
Chúng tôi muốn hàm đi qua bên trongHTML của từng phần tử với lớp đã chỉ định và kiểm tra xem giá trị tìm kiếm có tồn tại bên trong nó không. Nếu có, chúng tôi muốn làm cho nó hiển thị và nếu không, chúng tôi muốn làm cho nó ẩn đi