No information available at the moment

When the data is not present, it displays as "display none"...

However, I want it to show "no data found"

This is the current code

if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";

    }

I have tried something like this but it's not working

if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        var test = 'data not found';

document.write(test);

    }

It's still not working, I also tried using nodelist

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>


</body>
</html>

javascripthtmlcss

Answer №1

When using document.write(), the document will be cleared before any content is written. To see an example of this in action, you can try the following code snippet:</p>

<pre class="lang-js"><code>var nodataelem = document.getElementById("nodata");
function myFunction() {
    var input, filter, ul, li, a, i, isdatapresent = false;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
            isdatapresent = true;
        } else {
            li[i].style.display = "none"
        }
    }
    nodataelem.style.display = isdatapresent ? "none" : "block";
}
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
  <li id="nodata" style="display:none"><a href="#">No data found.</a></li>
</ul>


</body>
</html>

Answer №2

function displaySearchResults() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("searchInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("resultsList");
    li = ul.getElementsByTagName("li");
    var count = 0;
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
            count++;
        } else {
            li[i].style.display = "none";

        }
    }
    if(!count){
      document.getElementById("noResults").style.display = 'block';
    }else{
      document.getElementById("noResults").style.display = 'none';
    }
}
* {
  box-sizing: border-box;
}

#searchInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#resultsList {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#resultsList li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#resultsList li a:hover:not(.header) {
  background-color: #eee;
}

#noResults {
  display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>My Searchable List</h2>

<input type="text" id="searchInput" onkeyup="displaySearchResults()" placeholder="Search items.." title="Type to search list">
<div id="noResults">No results found</div>
<ul id="resultsList">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>

  <li><a href="#">Carrot</a></li>
  <li><a href="#">Daisy</a></li>

  <li><a href="#">Eggplant</a></li>
  <li><a href="#">Fennel</a></li>
  <li><a href="#">Grapes</a></li>
</ul>


</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using async/await with Axios to send data in Vue.js results in different data being sent compared to using Postman

I am encountering an issue while trying to create data using Vue.js. The backend seems unable to read the data properly and just sends "undefined" to the database. However, when I try to create data using Postman, the backend is able to read the data witho ...

javascriptnode.jsvue.jsasync-awaitaxios

Error Unhandled in Node.js Application

I have encountered an issue in my NodeJS application where I have unhandled code in the data layer connecting to the database. I deliberately generate an error in the code but do not catch it. Here is an example: AdminRoleData.prototype.getRoleByRoleId = ...

javascriptnode.jsnpmmean-stackwinston

When I zoom in, h4 and h5 headers expand and extend beyond their boundaries

Currently, I am working on designing forms for this specific website. Everything appears to render properly at normal zoom levels. However, when I adjust the zoom in or out slightly, issues arise where the h4's and h5's are no longer centered wit ...

htmlcssoverflowweb

What is the best way to create a mock URL in axios for unit testing purposes?

Scenario In this application, the URL is only accessible in production and cannot be accessed locally. During unit testing, it becomes necessary to mock the response from that URL. Solution Refer to this helpful tutorial for guidance. Current Implement ...

javascriptreactjsunit-testingaxios

The search box and submit button display without any visible borders

Question: I am facing an issue with the appearance of the searchbox and submit button in my PHP project. They look different compared to a simple HTML form. How can I fix this? The code on the PHP subpage is as follows: <header id="header"> <div ...

htmlcss

What is the process for customizing the heading titles on various pages within the Next.js application directory?

Within the app directory of Next.js 13, I have a default root layout setup: import "./globals.css"; export default function RootLayout({ children }) { return ( <html lang="en"> <head> <title>Create ...

javascriptreactjsnext.js

Avoid clicking on links while the webpage is still loading

I am facing an issue with my website where I need to intercept link-clicking events using jQuery. Everything works fine, but there is a problem if a user clicks on a link before JavaScript finishes loading, causing it to redirect to another page in error. ...

javascripthtmljqueryjquery-events

Building a hierarchical object structure from an array

I am working with an array of objects that looks like this: const sorted = [ { IsoCode: "EUR", Buy: 1.948, Sell: 1.963 }, { IsoCode: "GBP", Buy: 2.1184, Sell: 2.1894 }, { IsoCode: "USD", Buy: 1.5781, Sell: 1.6484 }, ] and my ...

javascriptarraysobjectecmascript-6

Boundaries on Maps: A guide to verifying addresses within a boundary

User provides address on the website. If the address falls within the defined boundary, it is marked as "Eligible". If outside the boundary, labeled as "Ineligible". Are there any existing widgets or code snippets available to achieve this functio ...

javascriptcssdictionarykmlboundary

Sending a parameter to a different function (on a separate webpage)

At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...

javascripthtmlfunctionvariables

Is there a way to extract information from an HttpClient Rest Api through interpolation?

I am currently facing an issue with a component in my project. The component is responsible for fetching data from a REST API using the HttpClient, and the data retrieval seems to be working fine as I can see the data being logged in the Console. However, ...

javascriptangulartypescripthttpangular-httpclient

Display a loading bar or prevent any user interface actions until the server has finished generating the file

I am currently developing a force directed layout using d3.js on data retrieved from an MS SQL server database. I'm creating the json file with a python script and running it on a local server using python -m SimpleHTTPServer. My goal is to establish ...

javascriptjqueryajaxd3.js

Shut down the angular modal

I am currently learning AngularJS and I find myself working on an application that utilizes both angular modal and jqGrid. (I understand this may not be the ideal setup, but for now, I have to make it work with both.) The content of my modal is loaded usi ...

javascriptangularjsjqgridangular-uiangular-ui-bootstrap

Using JavaScript to create a dynamic to-do list that persists on the browser even when refreshed

I created a Javascript Todolist that is functioning well, but I am seeking a way to ensure that my Todo-items persist on the browser even after refreshing until I choose to delete them. Any suggestions or advice on how I can achieve this? ...

javascript

What causes the inconsistency between Chrome's print CSS emulation and the Print Preview feature?

My website is based on Bootstrap 3 and ensuring that certain pages print properly is crucial for our customers. While most of the site prints fine, we are having issues with modal dialogs. I have been experimenting with Chrome's (v42.0.2311.135 m) CS ...

cssgoogle-chromeprinting

Is it possible to make a form field inactive based on another input?

I need help with disabling certain form fields until other fields are filled in. You can check out an example of what I'm trying to achieve here: https://jsfiddle.net/fk8wLvbp/ <!-- Bootstrap docs: https://getbootstrap.com/docs --> <div ...

javascriptjquerytwitter-bootstrap

Creating a Dynamic Dependent Dropdown with Jquery and Ajax in PHP

As a newbie in coding, I stumbled upon some valuable information to enhance my register form using Ajax. While the PHP files seem to be functioning correctly, I suspect that the JS file is not performing as expected. In the register form, you'll find ...

javascriptphpjquerymysqlajax

Aligning multiple spans vertically within a div of varying height (ui-select-multiple)

I am currently using AngularJS ui-select's Multiselect feature. If you want to see how my multiselect looks, check it out here: http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview When arranging spans in multiple lines, achieving nice vertical align ...

htmlcssvertical-alignmentui-select

Creating dynamic email content with Node.js using SendGrid templating

How can I properly format SendGrid's content using Node.js? I'm currently working on sending emails from a contact form within an application using SendGrid. I have a Google Cloud Function set up that I call via an HTTP post request. Although I ...

javascriptjsonnode.jsecmascript-6sendgrid

Incorporating marker tags to different sections of text within a contenteditable div

The main objective of this feature is to enable users to select placeholders within message templates (variable names enclosed in %). Inspired by Dribbble The API provides strings in the following format: "Hello %First_Name% %Middle_Name% %Last_Name% ...

javascripthtmlcssangular