Is there a way to implement on keyup event except one key?

Is there a way to implement on keyup event except one key? - javascript

I'm trying to develop a Javascript function that do some verification every time an input change (I'm using onkeyup event) except when we delete what we enter inside the input. Here is my actual code:
function myFunction() {
var input, filter, table, tr, td, i;
var cpt = 0;
var nbRow = 0;
input = document.getElementById("filterInput");
filter = input.value.toUpperCase();
table = document.getElementById("test");
thead = table.getElementsByTagName("tbody");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
nbRow = nbRow + 1;
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
cpt = cpt + 1;
}
}
}
if (nbRow == cpt) {
alert("The list is empty")
}
}
<input id="filterInput" onkeyup="myFunction()">
<table id="test">
<thead>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
</thead>
<tbody>
<tr>
<td>contenu1</td>
<td>contenu2</td>
<td>contenu3</td>
</tr>
</tbody>
</table>
How can I avoid a repetitive alert show everytime a user deletes one character?
EDIT :
I'm trying to avoid repetitive 'alert' without losing the verification after the user deletes one character.

If you want to ignore delete and backspace with onkeyup, you can add this check to the beginning of your function:
function myFunction(event) {
// capture what key was pressed
var key = event.keyCode || event.charCode;
if( key === 8 || key === 46 )
return; //if it's del or backspace, exit the function
// continue your function here
}

You can implement a validation in the function detecting which key was pressed...
function myFunction(e) {
if(e.keyCode !== 8){ // back key excluded
var input, filter, table, tr, td, i;
var cpt = 0;
var nbRow = 0;
input = document.getElementById("filterInput");
filter = input.value.toUpperCase();
table = document.getElementById("test");
thead = table.getElementsByTagName("tbody");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
nbRow = nbRow + 1;
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
cpt = cpt + 1;
}
}
}
if (nbRow == cpt) {
alert("The list is empty")
}
}
}
<input id="filterInput" onkeyup="myFunction(event)">
<table id="test">
<thead>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
</thead>
<tbody>
<tr>
<td>contenu1</td>
<td>contenu2</td>
<td>contenu3</td>
</tr>
</tbody>
</table>
Of course you would have to add the code for every key you want to exclude

Related

Filtering html table (JS)

I have an html table in my view that I want to filter with multiple filters. In this case, I have 3 filters, but I can have much more.
Here is a little part of the code, to show the problem
$(document).ready(function () {
$('#datefilterfrom').on("change", filterRows);
$('#datefilterto').on("change", filterRows);
$('#projectfilter').on("change", filterProject);
});
function filterRows() {
var from = $('#datefilterfrom').val();
var to = $('#datefilterto').val();
if (!from && !to) { // no value for from and to
return;
}
from = from || '1970-01-01'; // default from to a old date if it is not set
to = to || '2999-12-31';
var dateFrom = moment(from);
var dateTo = moment(to);
$('#testTable tr').each(function (i, tr) {
var val = $(tr).find("td:nth-child(2)").text();
var dateVal = moment(val, "DD/MM/YYYY");
var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
$(tr).css('display', visible);
});
}
function filterProject() {
var contentToColor = {
"Заявка отменена": "#9900ff",
"Подтверждено менеджером Vchasno": "green",
"Отменено менеджером Vchasno": "#9900ff",
"Отклонено региональным менеджером": "#9900ff",
"Подтверждено региональным менеджером": "red"
};
var project = this.value;
var filter, table, tr, td, i;
filter = project.toUpperCase();
table = document.getElementById("testTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<div class="row">
<div class="col-md-3">
<h4>Дата з</h4>
<input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
</div>
<div class="col-md-3">
<h4>Дата до</h4>
<input type="date" class="form-control" id="datefilterto" data-date-split-input="true">
</div>
<div class="col-md-2">
<h4>Проект</h4>
<select id="projectfilter" name="projectfilter" class="form-control"><option value="1">Тестовый проект</option><option value="2">Тест2</option></select>
</div>
</div>
<table id="testTable" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Дата</th>
<th scope="col">Проект</th>
</tr>
</thead>
<tbody id="report">
<tr>
<td class="proposalId">9</td><td> 17/07/2018</td> <td> Тестовый проект</td>
</tr>
<tr><td class="proposalId">8</td><td> 18/07/2018</td><td> Тестовый проект</td></tr>
<tr><td class="proposalId">7</td><td> 17/07/2018</td><td> Тест2</td></tr>
<tr style=""><td class="proposalId">3</td><td> 19/07/2018</td><td> Тест2</td></tr>
</tbody>
</table>
Here is the full working snippet
https://codepen.io/suhomlineugene/pen/JBBGXa
When I set date filter it filters table great, but when I set the second filter it gets data from the table that I have unfiltered.
Where is my problem?
Thank's for help!

the problem was filter = project.toUpperCase() is returning 1 or 2. I updated the logic to get the innerHTML and the do compare. Here is the modified code
function filterProject() {
var contentToColor = {
"Заявка отменена": "#9900ff",
"Подтверждено менеджером Vchasno": "green",
"Отменено менеджером Vchasno": "#9900ff",
"Отклонено региональным менеджером": "#9900ff",
"Подтверждено региональным менеджером": "red"
};
let dumb = this.options.selectedIndex;
dumb = this.options[dumb].innerHTML;
console.log(dumb);
var filter, table, tr, td, i;
filter = dumb.toUpperCase();
table = document.getElementById("testTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "table-row";
} else {
tr[i].style.display = "none";
}
}
}
}
Code pen link here

When you do filterProject(), check if you have already filtered out the rows you are iterating over:
....
for (i = 0; i < tr.length; i++) {
if(tr[i].style.display !== 'none'){
...
Here's a working codepen:
https://codepen.io/anon/pen/NBBxad

HTML
<input type="text" id="input_id" onkeyup="tableSearch('id', 'table', 0)">
Javascript
function tableSearch(input_id, table_id, col) {
var input, filter, table, tr, td, i;
input = document.getElementById(input_id);
filter = input.value.toUpperCase();
table = document.getElementById(table_id);
tr = table.getElementsByTagName('tr');
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName('td')[col];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

How to use same javascript filter twice in the same page with different tables?

I wanted to use the same javascript filter on the same page but with two or three different tables and different input field. Here below is the script I've been using to filter out dates on a table.
What if there are 2 or more tables?
function filterFunction() {
var input, filter, table, tr, td, i, totalViewable = 0;
input = document.getElementById("event_date_range");
filter = input.value.toUpperCase();
table = document.getElementById("dateTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
tds = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
totalViewable += parseFloat(tds.innerHTML);
document.getElementById("total_amount_td").innerHTML = "$" + totalViewable.toFixed(2);
} else {
tr[i].style.display = "none";
}
}
}
}
Table - dataTable
Input field - event_date_range
Output text - total_amount_td

Pass the table, input and total_amount_id as parameters to your filterFunction:
Something like:
function filterFunction(table, input, total_amount_id) {
var filter, tr, td, i, totalViewable = 0;
filter = input.value.toUpperCase();
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
tds = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
totalViewable += parseFloat(tds.innerHTML);
document.getElementById(total_amount_id).innerHTML = "$" + totalViewable.toFixed(2);
} else {
tr[i].style.display = "none";
}
}
}
}
And then call the function with different parameters:
var table1 = document.getElementById("dateTable");
var input1 = document.getElementById("event_date_range");
var total_amount_id1 = "total_amount_td";
filterFunction(table1, input1, total_amount_id1);
var table2 = document.getElementById("dateTable2");
var input2 = document.getElementById("event_date_range2");
var total_amount_id2 = "total_amount_td2";
filterFunction(table2, input2, total_amount_id2);

Using JavaScript to filter/search table

First of all, I'm not an expert in JavaScript, so the answer will probably be simple, but currently I'm using this (https://www.w3schools.com/howto/howto_js_filter_table.asp) tutorial to filter through a table, but you can only search in 1 column, so in this example only for Name or Country, but I want to search in both columns at the same time.
What do I need to change in this code?
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
//td = tr[i].getElementsByTagName("td")[0]; // This code only get the frist "TD" element
tds = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
td = tds[j];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
}
}

You can convert the HTMLCollection returned by getElementsByTagName to an Array (check this answer for ways to do it) and then use the some method to check if 'some' of the tdvalues match your filter. If there is a match, display them. Else hide them. Here's the code:
function myFunction() {
const input = document.getElementById('myInput')
const filter = input.value.toLowerCase()
const table = document.getElementById('myTable')
const tr = [...table.getElementsByTagName('tr')]
tr.forEach((t) => {
const foundMatch = [...t.getElementsByTagName('td')].some((td) => {
return td.innerHTML.toLowerCase().indexOf(filter) > -1
})
if (foundMatch) {
t.style.display = ''
} else {
t.style.display = 'none'
}
})
}
Check it in action on jsfiddle: https://jsfiddle.net/marcusmonteiro/hsdyajbn/2/show/

How to make a double select filter?

i'm missing something on this code, my goal is to make 2 filter on this table, the select with id="myInput" must be the one who determine the appearing of the table and apply the first filter,that's the js:
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
table.style.display = '';
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
The second one (id="myInput2") should apply an additional filter, hiding the rows who dont match with another column,here's the js:
function myFunction2() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput2");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[5];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
That's the html code (forget about br and other bad things, i'm just making an integration of existing code)
<label>Zona</label> <select id="myInput2" onchange="myFunction2()">
<option value="">Tutte le zone</option>
</select> <label>Gruppo</label>
<select id="myInput" onchange="myFunction()">
<option value="">Seleziona un gruppo di categoria</option>
</select> <br>
<br>
<table id="myTable" style="display: none;">
<tr class="header">
<th>Categoria</th>
<th>Descrizione</th>
<th>Classe</th>
<th>Tariffa</th>
<th>Zona</th>
</tr>
<c:forEach var="infoSezioni" items="${outParamInfoSezioni}">
<tr>
<td style="display:none;">${infoSezioni.gruppo}</td>
<td>${infoSezioni.categoria}</td>
<td>${infoSezioni.descr}</td>
<td>${infoSezioni.classe}</td>
<td>${infoSezioni.tariffa}</td>
<td>${infoSezioni.zonaCens}</td>
</tr>
</c:forEach>
</table>
the problem is that:
When i apply 1 of this filters, the other one just doesnt work, how i can fix that?

please review this one
in both filter one and two
//apply filter + checking flag
if (td.innerHTML.toUpperCase().indexOf(filter) < 0 && (!tr[i].dataset.filtered)) {
tr[i].style.display = "none";
//giving flag
tr[i].dataset.filtered = true;
}
Displaying Table when either input1 & input2 has value:
// and myFunction2() as well
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
//remove unnecessary space
filter = input.value.trim().toUpperCase();
//return if no value
if(filter.length > 0) {return;}
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
//displaying table
table.style.display = 'block';
...

searching text within Html table

I just googling to find a script that I can use to find a text within HTML table.
Like I create a table of student names which have many columns and rows. I have a good script too that display whatever I try to search but it display full row...
function searchSname() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
} else {
tr[i].style.display = "none";
}
}
}
<input id='myInput' onkeyup='searchSname()' type='text'>
<table id='myTable'>
<tr>
<td>AB</td>
<td>BC</td>
</tr>
<tr>
<td>CD</td>
<td>DE</td>
</tr>
<tr>
<td>EF</td>
<td>GH</td>
</tr>
</table>
But know I am looking for making some changes to display exact text whatever I searched instead of full row like it will display text that I type to search and hide other unmatched fully....
Kindly let me know is it possible to display text only that I type to search within a table? Like if I try to find student name "AB" then it should display AB only instead of "AB BC".

This is much simpler than you are making it.
var cells = document.querySelectorAll("#myTable td");
var search = document.getElementById("myInput");
search.addEventListener("keyup", function(){
for(var i = 0; i < cells.length; ++i){
// This line checks for an exact match in a cell against what the
// user entered in the search box
//if(cells[i].textContent.toLowerCase() === search.value.toLowerCase()){
// This checks for cells that start with what the user has entered
if(cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0){
cells.forEach(function(element){
element.style.display = "none";
});
cells[i].style.background = "yellow";
cells[i].style.display = "table-cell";
break;
} else {
cells[i].style.background = "white";
cells.forEach(function(element){
if(cells[i] !== element){
element.style.display = "table-cell";
}
});
}
}
});
table, td { border:1px solid black; border-collapse: collapse;}
<input id='myInput'>
<table id='myTable'>
<tr>
<td>AB</td>
<td>BC</td>
</tr>
<tr>
<td>CD</td>
<td>DE</td>
</tr>
<tr>
<td>EF</td>
<td>GH</td>
</tr>
</table>

We Keep Coding

JavaScript is the programming language of the Web.

Is there a way to implement on keyup event except one key? - javascript

Related

Filtering html table (JS)

How to use same javascript filter twice in the same page with different tables?

Using JavaScript to filter/search table

How to make a double select filter?

searching text within Html table

Categories

Resources