Làm cách nào để bạn thực hiện tìm kiếm trong javascript?
|
Tạo bộ lọc danh sách JavaScript và tìm kiếm bản ghi là một trong những kỹ năng cơ bản dành cho nhà phát triển web Show
Lọc có nghĩa là chúng tôi tạo một danh sách các bản ghi ngắn hơn, được điều chỉnh phù hợp hơn với mong muốn của người dùng, sử dụng một số giá trị đã biết Tìm kiếm có nghĩa là chúng tôi đang sử dụng cụm từ tìm kiếm không xác định để tìm bản ghi trong danh sách hoặc cơ sở dữ liệu. Chúng tôi đã quen với việc tìm kiếm nhiều đến mức nhiều trang chỉ cung cấp tìm kiếm, không lọc, danh mục. Chúng tôi chỉ cho bạn cách sử dụng cả hai, bạn sẽ sử dụng kỹ thuật nào là tùy thuộc vào bạn. Làm cách nào chúng tôi có thể lọc và tìm kiếm trong JavaScript bằng cách sử dụng
Đầu tiên, chúng tôi giải thích các chức năng lọc và tìm kiếm bản ghi, sau đó chúng tôi có một ví dụ chi tiết hơn, cách bạn có thể sử dụng kiến thức này khi xây dựng trang web của mình Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay hôm nay dùng thử miễn phíChức năng lọc trong JavaScriptChúng tôi có một chức năng tuyệt vời để tạo bộ lọc danh sách JavaScript cho một mảng, có tên là Gọi hàm lọc trên một mảng không thay đổi mảng, nhưng trả về một mảng mới được lọc. Đối với hàm gọi lại, chúng ta có thể sử dụng hàm nội tuyến hoặc như trong ví dụ của chúng ta, hàm có tên là Trong hàm gọi lại, bạn có thể kiểm tra một điều kiện và trả về giá trị đúng hoặc sai Tìm kiếm bằng hàm find trong JavaScriptHàm Đối với chức năng gọi lại, chúng tôi sử dụng cùng chức năng Chúng ta có thể sử dụng hàm Cuối cùng, tất cả các kiểu tìm kiếm sẽ cung cấp cho bạn một đối tượng (hoặc mảng), nếu bạn chưa quen với JavaScript và muốn tìm hiểu thêm về các đối tượng, hãy đọc bài đăng trên blog của chúng tôi. Đối tượng trong JavaScript là gì Điều gì xảy ra nếu find không tìm thấy bất kỳ phần tử nàoĐiều rất quan trọng cần biết là có khả năng phương thức Khi không tìm thấy phần tử, hàm Triển khai bộ lọc danh sách JavaScript bằng các vòng lặpNếu muốn, chúng ta cũng có thể triển khai tất cả các chức năng lọc và tìm kiếm bằng vòng lặp. Chúng tôi khuyên bạn nên sử dụng các hàm gốc của JavaScript, nhưng sử dụng các vòng lặp là cách tuyệt vời để tìm hiểu thêm về cách mọi thứ hoạt động trong nền Đôi khi, sử dụng vòng lặp cũng hữu ích nếu chúng ta cần tính toán một số khía cạnh khác dựa trên dữ liệu trong mảng hoặc danh sách phần tử Sao chép vào clipboardỞ đây chúng tôi trình bày cách chúng tôi có thể lọc các số lớn hơn 5 bằng cách sử dụng một Với vòng lặp for ta lặp cả 10 phần tử trong mảng. Trong mỗi lần lặp, chúng ta cần tìm các phần tử bằng chỉ mục. Khi kết thúc quá trình lặp, chúng tôi kiểm tra điều kiện Chúng ta cần tự tạo kết quả bằng cách sử dụng vòng lặp for. Đây là lý do tại sao chúng tôi giới thiệu Lợi ích của việc sử dụng vòng lặp là chúng ta có thể thêm nhiều lệnh hơn nếu điều kiện được đáp ứng. Trong trường hợp của chúng tôi, chúng tôi đã thêm một bộ đếm (_______12) sẽ đếm tất cả các số lớn hơn Cảm ơn bạn đã đăng ký😎 Tìm hiểu xem có nhà phát triển nào trong bạn hay không bằng cách trả lời một số câu hỏiVới ứng dụng này, bạn cho phép chúng tôi gửi email cho bạn Kiểm tra xem mảng có chứa các phần tử hay không bằng cách sử dụng chức năng bao gồmChúng ta có thể kiểm tra xem một mảng có chứa các phần tử hay không bằng cách sử dụng hàm Lần này chúng ta chỉ kiểm tra xem số 5 có trong mảng hay không. Hàm trả về Việc sử dụng bao gồm rất hữu ích để kiểm tra xem ID của người dùng hoặc một số đối tượng khác có trong danh sách ID trong nhóm hay không. Chúng tôi cũng có thể kiểm tra xem tùy chọn đã chọn có phải là một phần của tùy chọn hay không khi người dùng nhập giá trị Lấy chỉ mục của một phần tử bằng find IndexĐôi khi chúng ta chỉ cần một chỉ mục của các phần tử, chúng ta có thể sử dụng find Index cho điều đó. Theo một nghĩa nào đó, nó hoạt động giống như find nhưng chỉ trả về chỉ mục. Hãy tưởng tượng rằng bạn có hai mảng với dữ liệu tương tự nhau, một mảng dành cho dữ liệu người dùng, mảng còn lại dành cho đăng ký người dùng cả trong một mảng. Dữ liệu người dùng nằm trên cùng một chỉ mục với dữ liệu đăng ký và bạn có thể sử dụng chỉ mục để người dùng truy cập dữ liệu đăng ký Sao chép vào clipboardNhưng hãy lưu ý rằng Chúng tôi truy cập giá trị của số bằng cách sử dụng chỉ mục trên mảng Bây giờ chúng ta đã biết lý thuyết, chúng ta có thể sử dụng tất cả kiến thức đó trong một ví dụ Ví dụ về bộ lọc danh sách JavaScriptVí dụ về bộ lọc danh sách JavaScript của chúng tôi được chia thành hai ví dụ chính
Chúng tôi muốn giới thiệu các chức năng bằng cách sử dụng danh sách các ban nhạc vì tất cả chúng tôi đều thích nghe nhạc và vui chơi. Ngoài ra, bạn cũng có thể dễ dàng thêm các ban nhạc yêu thích của mình Nền tảng của trang của chúng tôi và cách chúng tôi tải dữ liệuCó một vài chức năng cơ bản mà trang web của chúng tôi cần để hoạt động bình thường. Ví dụ: tải dữ liệu và hiển thị dữ liệu sau khi tải trang web xong. Các chức năng này không phải là chức năng tìm kiếm nhưng chúng giúp chúng tôi tải dữ liệu và hiển thị các bản ghi trên trang web Dữ liệu JSON cho các dảiTrang web của chúng tôi sẽ có một tìm kiếm và chúng tôi cần một số dữ liệu để tìm kiếm trong. Đây là một số dữ liệu JSON cho các dải, chúng tôi sẽ sử dụng nó trong các ví dụ lọc của chúng tôi. Sao chép dữ liệu và lưu trữ nó trong một tệp JSON trong trang web của bạn, chúng tôi đã đặt tên cho các dải tệp của mình. json Sao chép vào clipboardCác bạn lưu ý trong ảnh này dữ liệu của một số dải được khoanh lại để ảnh nhỏ lại Đang tải dữ liệu cho trang webĐầu tiên, chúng tôi thêm một biến, biến này sẽ lưu trữ tất cả các dải chúng tôi có trong tệp JSON của mình Sao chép vào clipboard
Chúng tôi sử dụng loadData trong hàm loadBands Sao chép vào clipboardHàm này chỉ định tên của tệp JSON và một hàm được gọi khi tải xong Hàm cuối cùng để tải được gọi là dữ liệu Hàm này cũng chứa lệnh gọi phương thức fillDropDown Chúng tôi cần một số thành phần HTML trên trang web để fillDropDown hoạt động. Bạn có giải thích về việc sử dụng thẻ nào, bên dưới Đầu tiên, chúng ta lấy tham chiếu cho phần tử HTML bằng phương thức Để thêm các tùy chọn danh sách, chúng tôi lặp qua tất cả các dải bằng vòng lặp forEach. Trong mỗi lần lặp lại, chúng tôi tạo một phần tử tùy chọn mới Đối với thuộc tính nhãn và tên, chúng tôi sử dụng tên băng tần. Trong các ví dụ phức tạp hơn, value property là ID thông thường của một số loại, để dễ dàng liên kết với bản ghi bằng ID. Sẽ tốt hơn nếu chọn một trong các bản ghi ngay từ đầu. Chúng tôi làm điều này bằng cách đặt thuộc tính Đặt giá trị thành 0 sẽ chọn bản ghi đầu tiên vì chỉ mục dựa trên số không Bây giờ chúng ta đã chọn một dải, chúng ta có thể gọi hàm Tạo HTML cho trường tìm kiếm và kết quảVí dụ đầu tiên cho thấy cách sử dụng trường tìm kiếm để lọc danh sách, sử dụng JavaScript. Bạn có thể thấy trường tìm kiếm này trông như thế nào trên trang web của chúng tôi HTML cho đầu vào và để hiển thị kết quả trông như thế này Sao chép vào clipboardPhần tử đầu tiên chúng tôi sử dụng là thẻ Cuối cùng, có một danh sách không có thứ tự, thẻ Sử dụng trường tìm kiếm để lọc danh sách trong JavaScriptSao chép vào clipboardTrước tiên, chúng tôi cần lấy tham chiếu cho các thành phần HTML bằng phương pháp Trong biến Tiếp theo là biến Xin lưu ý rằng chúng ta chỉ sử dụng hàm Theo nghĩa lưu trữ một giá trị trong biến Bây giờ chúng tôi tập trung vào việc hiển thị các bản ghi Lúc đầu, chúng tôi đặt InternalHTML thành chuỗi trống, đây là một thủ thuật nhỏ mà chúng tôi sử dụng để xóa nếu có bất kỳ kết quả nào từ tìm kiếm trước đó đã được lưu trữ trong danh sách không có thứ tự của chúng tôi. Bạn cũng có thể xóa từng mục trong danh sách Bước cuối cùng là lặp qua tất cả các dải Đối với mỗi dải, chúng tôi tạo một mục danh sách mới với tài liệu. phương thức createElement, phương thức này tạo một phần tử HTML bằng cách sử dụng tên của thẻ mong muốn Khi chúng tôi đặt giá trị Đừng quên nối thêm mục danh sách mới vào danh sách không có thứ tự ở cuối Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay hôm nay dùng thử miễn phíCách tạo chức năng tìm kiếm văn bản trong JavaScriptHàm tìm kiếm tận dụng cả phương thức lọc và bao gồm phương thức mà chúng ta đã nói trước đây. Chức năng lọc lọc các dải, nhưng chúng tôi sử dụng bao gồm để tìm kiếm văn bản trong các giá trị dải (v.v. trong tên của ban nhạc Sao chép vào clipboardChúng tôi bắt đầu bằng việc kiểm tra để đảm bảo rằng có tìm kiếm chuỗi. Trong các trường hợp khác, chức năng tìm kiếm trả về tất cả các dải Tiếp theo, chúng tôi chuyển đổi searchString Chúng tôi sử dụng toLowerCase để làm cho trường hợp tìm kiếm của chúng tôi không nhạy cảm, vì vậy chúng tôi cần đặt cả chuỗi tìm kiếm và tất cả các giá trị thành chữ thường Chúng tôi nhận được các giá trị được lọc bằng cách sử dụng bộ lọc Trước tiên, chúng tôi kiểm tra xem tên ban nhạc hoặc mô tả ban nhạc có chứa Nếu bất kỳ điều kiện nào đáp ứng các tiêu chí, chúng tôi cần trả về giá trị thực Tìm kiếm mảng trong mảngĐể minh họa, chúng tôi cũng đã thêm một tiêu chí để kiểm tra xem có bất kỳ album nào mà ban nhạc đã ghi hay không, có chứa chuỗi tìm kiếm của chúng tôi không. Để làm được điều đó, chúng tôi cần một bộ lọc khác để lọc album của các ban nhạc Cuối cùng, chúng tôi kiểm tra xem Hãy nhớ hoàn thành chức năng Thêm danh sách thả xuống để chọn băng tần vào trang webDanh sách thả xuống hoặc thẻ chọn HTML là một cách hay để cho phép người dùng chọn một tập hợp con các bản ghi Sao chép vào clipboardĐầu tiên, chúng tôi thêm thẻ chọn, chúng tôi cần thêm id Chúng tôi đặt kết quả của dải đã chọn vào thẻ div và chúng tôi thêm thuộc tính id Bây giờ chúng tôi đã sẵn sàng để sử dụng các phần tử đã chuẩn bị và tạo bộ lọc danh sách JavaScript Triển khai bộ lọc danh sách JavaScript với danh sách thả xuốngSao chép vào clipboardTrước tiên, chúng tôi cần lưu trữ các tham chiếu đến các phần tử HTML của mình bằng cách sử dụng phương thức Trong biến thả xuống, chúng tôi lưu trữ tham chiếu cho thẻ chọn với id Lần này chúng ta sử dụng phương thức find để tìm ban nhạc đầu tiên đáp ứng các tiêu chí. Tìm hoạt động theo cách tương tự như bộ lọc, nhưng nó chỉ trả về một bản ghi. Chúng tôi chỉ kiểm tra xem tên ban nhạc có bằng với giá trị của lựa chọn thả xuống hay không. Chúng tôi có thể làm điều đó vì chúng tôi cũng đã thêm tên ban nhạc cho các giá trị của các tùy chọn được liệt kê trong danh sách thả xuống Nếu dải được tìm thấy, chúng tôi tạo kết quả với định dạng HTML trong chuỗi ký tự. Chúng tôi thay đổi giá trị HTML của bandSelectedDiv bằng thuộc tính innerHTML. InternalHTML khác với InternalText vì nó cũng cho phép chúng ta định dạng các giá trị. Trong trường hợp của chúng tôi, chúng tôi in đậm tên ban nhạc Kết luận về tìm kiếm và lọc dữ liệuCó nhiều chức năng đã có sẵn cho chúng tôi để triển khai các bộ lọc danh sách trong JavaScript. Hầu hết trong số họ đã ra khỏi hộp và sẵn sàng để sử dụng. Họ cung cấp các lệnh gọi lại để triển khai tùy chỉnh cách kiểm tra các điều kiện Nếu bạn biết cách sử dụng hàm Làm cách nào để thực hiện thao tác tìm kiếm trong JavaScript?nguyên mẫu. search() Phương thức search() thực hiện tìm kiếm sự khớp giữa một biểu thức chính quy và đối tượng Chuỗi này.
Làm cách nào để thực hiện yêu cầu tìm kiếm trong JavaScript?Truy xuất thông tin nhập của người dùng
. const searchBar = tài liệu. getElementById("searchBar"); Bây giờ chúng ta có một tham chiếu đến searchBar , chúng ta có thể thêm trình lắng nghe sự kiện keyup để truy xuất đầu vào từ người dùng.
Làm cách nào để tìm kiếm trong chuỗi JavaScript?Trong JavaScript, search() là một phương thức chuỗi được sử dụng để tìm kiếm một chuỗi hoặc biểu thức chính quy cụ thể. Vì phương thức search() là một phương thức của đối tượng String nên nó phải được gọi thông qua một thể hiện cụ thể của lớp String.
Làm cách nào để tìm kiếm theo tên trong JavaScript?Ví dụ JavaScript getElementsByName()
. Thứ hai, lắng nghe sự kiện nhấp chuột của nút gửi. Thứ ba, lấy tất cả các nút radio bằng getElementsByName() và hiển thị giá trị đã chọn trong phần tử đầu ra. select the submit button by its id btnRate using the getElementById() method. Second, listen to the click event of the submit button. Third, get all the radio buttons using the getElementsByName() and show the selected value in the output element. |
