message Alert on an empty search

Hi experts, I wish to put message alert during search, once no item found upon searching. Codes below are working but I do not know  where to position an alert messages that would tell the user "No item". Thank you!

JavaScript:

var inp=function(){  
  var inputElem=document.getElementById("myInput");
  var buttElem=document.getElementById('myButton');
  var valueInput=inputElem.value;  
  return valueInput;
 };
  var table=function(){
  var tableElem=document.getElementById('myTable');  
  return tableElem;
};

function mySearch2(inpuArg, tableArg)
{
  var filter = inpuArg.toUpperCase();
  for(var i = 0; i < tableArg.rows.length; i++) {
    var tr = tableArg.rows[i];
    var cell = tr.cells[1];

    if (cell.textContent.substr(0,filter.length).toUpperCase() == filter) {
      tr.style.display = 'table-row';
    }
    else {
      tr.style.display = 'none';
      alert("no item");
    }
  }
}
Whing Dela CruzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
I create an another option to show you an alert message. I create a new element (i named alertMessage) and then when you haven't return items a message appears in the button for 1500ms and dissapearing via setTimeout function.

Additionally  from the above code add the following:

var alertMessage=document.createElement('div');
alertMessage.setAttribute('id', 'alert');
alertMessage.style.border='solid 2px red';
alertMessage.style.backgroundColor='orange';
alertMessage.innerHTML='No items Found';

var inp=function(){  
  var inputElem=document.getElementById("myInput");
  var buttElem=document.getElementById('myButton');
  var valueInput=inputElem.value;  
  return valueInput;
 };
  var table=function(){
  var tableElem=document.getElementById('myTable');  
  return tableElem;
};

function mySearch2(inpuArg, tableArg)
{
  var filter = inpuArg.toUpperCase();
  for(var i = 0; i < tableArg.rows.length; i++) {
    var tr = tableArg.rows[i];
    var cell = tr.cells[1];

    if (cell.textContent.substr(0,filter.length).toUpperCase() == filter) {
      tr.style.display = 'table-row';
    }
    else {
      tr.style.display = 'none';
      tableArg.appendChild(alertMessage);
      setTimeout(function(){
      tableArg.removeChild(alertMessage);
  }, 1500);
    }
  }
}

Open in new window

Julian HansenCommented:
Except you are appending a div to a table. Rather append a <Tr> keep the markup valid

Personally I would have the message after the table
<table ...>
</table>
<div class="alert" id="alert-msg">No rows found</div>

Open in new window

JavaScript
function mySearch2(inpuArg, tableArg)
{
  var filter = inpuArg.toUpperCase();
  var alert = document.getElementById('alert-msg');
  var found = 0;
  for(var i = 0; i < tableArg.rows.length; i++) {
    var tr = tableArg.rows[i];
    var cell = tr.cells[1];

    if (cell.textContent.substr(0,filter.length).toUpperCase() == filter) {
      tr.style.display = 'table-row';
      found++;
    }
    else {
      tr.style.display = 'none';
    }
    found ? alert.style.display = 'inherit' : alert.style.display = 'none';
  }
}

Open in new window

Julian HansenCommented:
Here is an updated version of the code
<script>
var tbl = document.getElementById('myTable');
var norows = document.getElementById('no-rows-alert');
document.getElementById('myInput').addEventListener('keyup', function() {
  var matchedRow = 0;
  for(var r = 0; r < tbl.rows.length; r++) {
    var row = tbl.rows[r];
    var matchedCell = 0;
    for (var c=0; c < row.cells.length; c++) {
      var cell = row.cells[c];
      var srch = this.value.toUpperCase();
      var cellVal = cell.textContent.substr(0, this.value.length).toUpperCase();
      if (srch == cellVal) {
        matchedCell++;
        break;
      }
    }
    matchedRow += matchedCell;
    row.style.display = matchedCell ? 'inherit' : 'none'
  }
  
  norows.style.display = matchedRow ? 'none' : 'inherit';
});
</script>

Open in new window

Working sample here
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Download eBook
Whing Dela CruzAuthor Commented:
Hi Julian. Leonidas solution answered my problem, but I thank you for adding solution which I impress too. However, on your solution I wish to use button before the search will start. Instead of using KeyUp function as shown on (myInput). I actually tried it but can't achieve since of limited knowledge about this language. Thank you!
Julian HansenCommented:
I am confused - the code provided by Leonidas is based on your original code and appears to have a bug (From the original code)

This logic is wrong (in my view)
    if (cell.textContent.substr(0,filter.length).toUpperCase() == filter) {
      tr.style.display = 'table-row';
    }
    else {
    }

Open in new window


The reason being that for rows that don't have the matching text the message is going to be displayed. In other words

Row 1 has matching text - first part if if fires and row is retained
Row 2 does not have matching text - second part of if fires and alert is shown - even though Row 1 was found.

There needs to be some flag to say a valid row has been found to prevent the display of the message when a row has been found.

Here is the revised code for doing it with a button.
Note this code is different from my previous post as it takes into account your code specification that only 1 cell needs to be checked - not the entire row. In your code you check cell 1 - in my sample it is cell 0.
<script>
var tbl = document.getElementById('myTable');
var norows = document.getElementById('no-rows-alert');
document.getElementById('myButton').addEventListener('click', function() {
  var matchedRow = false;
  var srch = $('#myInput').val().toUpperCase();
  for(var r = 0; r < tbl.rows.length; r++) {
    var row = tbl.rows[r];
	var cell = row.cells[0];
    var cellVal = cell.textContent.substr(0, srch.length).toUpperCase();
    if (srch == cellVal) {
        matchedRow = true;
		row.style.display = 'table-row';
    }
	else {
		row.style.display = 'none';
	}
  }
  
  norows.style.display = matchedRow ? 'none' : 'inherit';
  if (!matchedRow) {
    setTimeout(function() {
      norows.style.display = 'none'
    }, 1500)
  }
});
</script>

Open in new window


Working sample here
Whing Dela CruzAuthor Commented:
Hi Julian, I really appreciated the way you anticipate the problem and I really love your solution as well. As I tried running your codes its work very fine. However, on the other side of my project I've got a problem. A cloneNode table your codes won't work anymore. Here's what my project goes. I have two tables, named, myTable and myTable2. I copy a data from Mytable2 to myTable using cloneNode then do certain search using your codes. In here the codes you provided will no longer work. Its very hard for me to trace the cause. I attached here the codes to make you understand. Thank you!
samt.html
Julian HansenCommented:
Change your JavaScript to the following. The problem was that tbl was being declared outside of the eventhandler so was binding to the empty table
<script>
var norows = document.getElementById('no-rows-alert');
document.getElementById('myButton').addEventListener('click', function() {
  var tbl = document.getElementById('myTable');
  var matchedRow = false;
  var srch = $('#myInput').val().toUpperCase();
  for(var r = 0; r < tbl.rows.length; r++) {
    var row = tbl.rows[r];
    var cell = row.cells[0];
    var cellVal = cell.textContent.substr(0, srch.length).toUpperCase();
    if (srch == cellVal) {
      matchedRow = true;
      row.style.display = 'table-row';
    }
    else {
      row.style.display = 'none';
    }
  }
  
norows.style.display = matchedRow ? 'none' : 'inherit';
  if (!matchedRow) {
    setTimeout(function() {
      norows.style.display = 'none'
    }, 1500)
  }
});
</script>
<Script>
function copyAlldata(){
var source = document.getElementById('myTable2');
var destination = document.getElementById('myTable');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'myTable');
destination.parentNode.replaceChild(copy, destination);
};
</script>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Whing Dela CruzAuthor Commented:
Thank you very much Julian, Your solution is working very well. More power !
Whing Dela CruzAuthor Commented:
Thank you so much both of you, experts, more power and God bless!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.