Скачать или смотреть How to Display No Results Found Message on Search Using JavaScript Only

Learn how to dynamically show a `No Results Found` message in your search implementation with pure JavaScript, even when you can't modify your HTML.
---
This video is based on the question https://stackoverflow.com/q/75063259/ asked by the user 'magicsinger' ( https://stackoverflow.com/u/19163992/ ) and on the answer https://stackoverflow.com/a/75063982/ provided by the user 'Mohammed sinan' ( https://stackoverflow.com/u/15436303/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to display No results found message on Search using Javascript only?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Display No Results Found Message on Search Using JavaScript Only

Have you ever built a search feature and found that it just doesn't provide user feedback when no results are returned? If so, you’re not alone. Many developers face the challenge of indicating to users that their search did not yield any results, especially when they don't have the option to modify the HTML structure of the page. In this guide, we will explore how to dynamically display a "No Results Found" message using JavaScript alone.

The Problem

You're looking to implement a search feature where users can type in keywords to search through a table of data. However, if no matches are found, you want to communicate that status effectively to the user. Unfortunately, you're restricted to only modifying JavaScript without the ability to edit the existing HTML structure, making this task a bit more challenging.

Let’s look at the existing JavaScript function that handles the search functionality:

[[See Video to Reveal this Text or Code Snippet]]

In this code, the search feature filters the table based on user input. However, it doesn't give any indication when no results are found.

The Solution

To solve this problem, we will modify the myFunction and add a new element to display the "No Results Found" message. Here’s how:

Step 1: Add a Placeholder for the Message

Even though we cannot edit the HTML directly, we can create a placeholder dynamically within our JavaScript code. We'll add a <h1> element to display our message.

Step 2: Update Your JavaScript Code

Here's the revised code that includes the functionality to show the "No Results Found" message:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Adjust Your HTML Code

Add the following line to your HTML code above the search input to create a spot for the message:

[[See Video to Reveal this Text or Code Snippet]]

Complete Example

Here’s the complete implementation of the HTML and JavaScript that works together:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With these enhancements, your search feature will now inform users when there are no results found, greatly improving the user experience. Simplifying feedback in your applications can make your tools more user-friendly and intuitive. Happy coding!