Cách tạo thanh tìm kiếm hoạt động trong javascript

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ếm

Chơ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

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

 

Xem trước mã Html trên thanh tìm kiếm

Mã CSS cho thanh Tìm kiếm

 @import url('https://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

 

Tạo thanh tìm kiếm HTML, CSS và JavaScript

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