asked on 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.getElem
var buttElem=document.getEleme
var valueInput=inputElem.value
return valueInput;
};
var table=function(){
var tableElem=document.getElem
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
tr.style.display = 'table-row';
}
else {
tr.style.display = 'none';
alert("no item");
}
}
}
JavaScript:
var inp=function(){
var inputElem=document.getElem
var buttElem=document.getEleme
var valueInput=inputElem.value
return valueInput;
};
var table=function(){
var tableElem=document.getElem
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
tr.style.display = 'table-row';
}
else {
tr.style.display = 'none';
alert("no item");
}
}
}
JavaScriptHTML
Last Comment
Julian Hansen
SOLUTION
Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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>
ASKER
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!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
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)
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.
Working sample here
This logic is wrong (in my view)
if (cell.textContent.substr(0,filter.length).toUpperCase() == filter) {
tr.style.display = 'table-row';
}
else {
}
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>
Working sample here
ASKER
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
samt.html
ASKER CERTIFIED SOLUTION
Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a questionASKER
Thank you very much Julian, Your solution is working very well. More power !
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Thank you so much both of you, experts, more power and God bless!
You are welcome.
Personally I would have the message after the table
Open in new window
JavaScriptOpen in new window