Thanh tìm kiếm làm việc html javascript

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.

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

Được rồi, vì vậy có lẽ tất cả chúng ta đều biết thanh tìm kiếm là gì vào thời điểm này nhưng hãy để tôi giải thích nhanh. Thanh tìm kiếm là hộp nhập xuất hiện trên trình duyệt, trang web và ứng dụng. Nó nhận truy vấn tìm kiếm của người dùng và cho phép bạn tìm kiếm một số loại thông tin

Công cụ tìm kiếm là hệ thống phần mềm đằng sau hậu trường xử lý các tìm kiếm trên web

Bạn có biết web toàn cầu được lập chỉ mục hoàn toàn bằng tay trước khi có các công cụ tìm kiếm web đầu tiên không?

Để bắt đầu tạo tính năng thanh tìm kiếm, chúng ta nên nghĩ về một số khái niệm đi vào phiên bản hoạt động của nó. Chúng tôi biết rằng chúng tôi sẽ cần một thanh tìm kiếm trống để nhận đầu vào của người dùng. Chúng tôi cũng cần một cách để nắm bắt đầu vào đó và xử lý nó để bắt đầu tìm thấy những gì người dùng đang tìm kiếm khi họ nhập thông tin đó vào. Để tìm và hiển thị dữ liệu này cho người dùng, chúng tôi nên lưu trữ bất kỳ loại dữ liệu nào đang được tìm kiếm. Trong trường hợp này, chúng tôi sẽ làm việc với một ứng dụng xã hội cho phép người dùng tìm kiếm danh sách bạn bè của họ bằng thanh tìm kiếm

Để bắt đầu xây dựng thanh tìm kiếm, trước tiên chúng ta cần thiết lập HTML để nó xuất hiện trên ứng dụng của chúng ta. Chúng ta có thể xây dựng cấu trúc cơ bản để hiển thị nội dung nào đó trên trang

Hãy xem tính năng tìm kiếm của chúng tôi trông như thế nào sau khi thiết lập mọi thứ với HTML

Chưa phải là ứng dụng tìm kiếm đẹp nhất nhưng chúng tôi đang đi đến đâu đó. Chúng tôi sẽ cung cấp cho nó một số kiểu dáng để làm cho nó thân thiện hơn với người dùng

Điều này sẽ cung cấp cho chúng tôi một ứng dụng đẹp hơn nhiều để làm việc với

Tuyệt quá. Giờ đây, chúng tôi có thể xây dựng chức năng để cung cấp cho ứng dụng của mình khả năng tìm kiếm bạn bè bằng cách nhập tên của họ và để họ hiển thị trên trang. Để làm điều này, chúng ta cần suy nghĩ về cách chúng ta có thể xử lý sự kiện người dùng nhập vào hộp tìm kiếm bằng JavaScript. Chúng tôi cần so sánh đầu vào tìm kiếm của họ với tên chúng tôi có trong danh sách bạn bè của mình. Hãy liệt kê một số bước chúng tôi sẽ thực hiện để thực hiện điều này trước khi viết JavaScript của chúng tôi

• Lấy các phần tử searchInput và name từ DOM và lưu trữ chúng trong các biến
• Thêm một trình lắng nghe sự kiện trên searchInput để lắng nghe các sự kiện của keyup
• Nhận đầu vào của người dùng sau khi sự kiện được kích hoạt
• Tìm kiếm các thành phần tên và chuyển đổi văn bản thành chữ thường để so sánh không phân biệt chữ hoa chữ thường
• So sánh tên với truy vấn tìm kiếm bằng phương thức chuỗi includes()
• Cập nhật kiểu thành phần tên để hiển thị tên phù hợp

Bây giờ chúng ta đã thiết lập xong JavaScript, hãy thử nghiệm tính năng tìm kiếm mới bằng cách bắt đầu nhập một số thông tin vào thanh tìm kiếm

Nó hoạt động. Bây giờ, thanh tìm kiếm của chúng tôi sẽ cung cấp cho chúng tôi kết quả tên phù hợp nhất dựa trên ký tự chữ cái mà chúng tôi đang nhập

Thanh tìm kiếm là một tính năng phổ biến của hầu hết các ứng dụng web và di động. Chúng thường xuất hiện ở đâu đó ở góc trên cùng của trang web và tồn tại trên trang web để thuận tiện cho người dùng. Tùy thuộc vào các chi tiết cụ thể của ứng dụng của bạn, các thanh tìm kiếm có thể là một bổ sung tuyệt vời cho nó. Ví dụ: nếu ứng dụng của bạn chứa nhiều thông tin cho người dùng thì ứng dụng đó có thể cải thiện đáng kể trải nghiệm người dùng