We Keep Coding

How to filter exact phrase in table?

Can someone please help with this code;
<style>
#myInput {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8iOHV-jsRl0FQ2hVomg1GUjdg4W63HoqXrREEp4m5KNpOVWRAJRxJD_SBXN-l2hlAc7rbL_LNpl145QhEjTUC54EHfJImTH-gKe-a2CtD8XFq9ZBUG4xJekQwHfIvIP4yaU_Zm-QX3HnvawVcXY82APg5QNY6rlcKX2Bx9b3wQ6v_f7zVuOF19Mn4/s1600/149852.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 60%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
</style>
<script>
const myFunction = () => {
const trs = document.querySelectorAll('#myTable tr:not(.header)')
const filter = document.querySelector('#myInput').value
const regex = new RegExp(filter, 'i')
const isFoundInTds = td => regex.test(td.innerHTML)
const isFound = childrenArr => childrenArr.some(isFoundInTds)
const setTrStyleDisplay = ({ style, children }) => {
style.display = isFound([
...children // <-- All columns
]) ? '' : 'none'
}
trs.forEach(setTrStyleDisplay)
}
</script>
I need it to show results with the exact phrases. For instance, if I type DR it should only show where DR is alone and not part of a sentence. Unfortunately, I can't explain it any better than this, but ask me questions and I'll try to provide an answer. Not a program.

Make your regular expression match start '^' and end '$' of a string.
const tds = document.querySelectorAll("table tbody td");
const highlightRows = (text) => {
var re = new RegExp('^' + text + '$', 'i');
tds.forEach(td => {
if (td.textContent.trim().match(re)) {
td.classList.add("selected");
td.closest("tr").classList.add("selected");
}
})
};
highlightRows("foo");
tr.selected td{
background-color: yellow;
}
tr.selected td.selected{
color: green;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>foo bar</td>
<td>bar</td>
</tr>
<tr>
<td>2</td>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>3</td>
<td>foo</td>
<td>foo</td>
</tr>
</tbody>
</table>

Remove entire table when there is no input in searchbox?

I have been twisting my head around on this and I can't seem to fix it.
I have not coded much, but wanting to learn. However, I am trying to make a table in which when there is no input the entire table vanishes.
As of now I have managed to get it so that it starts as vanished, and that when information is inserted into the search box the non-relevant lines dissapear. However, when all text in the search box is removed the entire table is showing. I want the table to stay hidden when there is no text that matches.
Would love to get any feedback on what I am doing wrong here.
function performSearch() {
// Declare search string
var filter = searchBox.value.toUpperCase();
// Loop through first tbody's rows
for (var rowI = 0; rowI < trs.length; rowI++) {
// define the row's cells
var tds = trs[rowI].getElementsByTagName("td");
// hide the row
trs[rowI].style.display = "none";
// loop through row cells
for (var cellI = 0; cellI < tds.length; cellI++) {
// if there's a match
if (tds[cellI].innerHTML.toUpperCase().indexOf(filter) > -1)
{
// show the row
myTable.style.display = "table";
trs[rowI].style.display = "";
// skip to the next row
continue;
}
}
}
}
// declare elements
const searchBox = document.getElementById('searchBox');
const table = document.getElementById("myTable");
const trs = table.tBodies[0].getElementsByTagName("tr");
// add event listener to search box
searchBox.addEventListener('keyup', performSearch);
* {
box-sizing: border-box;
}
#searchBox {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 30%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
position: relative;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#myTable {
border-collapse: collapse;
width: 80%;
border: 1px solid #ddd;
font-size: 18px;
position: relative;
left: 10%;
display: none;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
#Overskrift {
width: 100%;
text-align-last: center;
font-size: 40px;
}
<input class="form-control" type="text" id="searchBox" placeholder="Search ..." onkeyup="searchTableColumns()">
<table id="myTable">
<thead>
<tr class="header">
<th onclick="sortTable(0)" style="width:35%;">Fagnavn</th>
<th onclick="sortTable(1)" style="width:21%;">LK20</th>
<th onclick="sortTable(2)" style="width:21%;">LK06</th>
<th onclick="sortTable(3)" style="width:21%;">R94</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pika</td>
<td>Chu</td>
<td>Poke</td>
<td>Mon</td>
</tr>
<tr>
<td>Temporary</td>
<td>Text</td>
<td>Fields</td>
<td>Here</td>
</tr>
</tbody>
</table>

There is a simple solution for this. Just add a check to the end your performSearch function:
if (searchBox.value === ''){
table.style.display='none';
}
else {
table.style.display='table';
}
You can also check it here:
https://codepen.io/serazoltan/pen/dyZRprb

Bootstrap Table - Searchable Treegrid

I am pretty new to Javascript and I am having troubles to implement a searchable method for the following treegrid.
Just by adding the method data-search="true" within the <table> variables doesn't seem to work as I expected. Only the parents can be searched, while the children are not found. Does this imply that I need to create a custom search function to return the children plus parent?

Seems like your estructure needs a little more order, I recommend you to create the full table with HTML and the Javascript function separatly:
For the html table I will give you an example like this one:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
Then if you gonna add some CSS Style it could be something like this:
<style>
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
</style>
And of course at the end of it you can add the Java script that is gonna do the job for you, in this case it will filter the first column, but you can change it and even make it search on all colums
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
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) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
I hope this actually help you! :)

How to make filter/search bar search only when 3 characters has been entered?

I have here a search bar from w3schools website which I have tweaked.
Right now, it will show all results at the first letter entered which is slowing down my site since there's more than 5000+ results in one go.
I wonder how can I make this search ONLY after 3 (or 4-5) characters/letters have been inputted?
Here's the DEMO
Here's the script so far:
<script>
document.addEventListener("DOMContentLoaded", function() {
var $input = document.getElementById("myInput"),
$table = document.getElementById("myTable"),
$$tr = $table.querySelectorAll("tbody tr"),
$noResults = $table.querySelector("tfoot tr");
for (var i = 0; i < $$tr.length; i++) {
var $$td = $$tr[i].querySelectorAll("td"),
name = $$td[0].innerText,
country = $$td[1].innerText;
$$tr[i].normalizedValue = normalizeStr( name + " " + country );
}
$input.addEventListener("input", performSearch);
function performSearch() {
var filter = normalizeStr(this.value),
resultCount = 0;
for (var i = 0; i < $$tr.length; i++) {
var isMatch = filter.length > 0 && $$tr[i].normalizedValue.includes(filter);
if (isMatch) { resultCount++; }
$$tr[i].classList[isMatch ? "add" : "remove"]("visible");
}
var showNoResultsMessage = resultCount === 0 && filter.length > 0;
$noResults.classList[showNoResultsMessage ? "add" : "remove"]("visible");
}
function normalizeStr(str) {
return (str || '').toUpperCase().trim();
}
});
</script>
Here's the CSS:
#myInput{
font-size:15px;
width:90%;
padding: 5px;
border-radius: 4px;
border: none;
margin-bottom: 1px;
background: #f5f5f5;
outline: none;
color: #000000;
}
input::placeholder {
color: #000000;
}
#myTable{
border-collapse:collapse;
width:90%;
font-size:14px;
font-family: "Poppins", sans-serif;
}
#myTable td, #myTable th{
text-align:left;
padding:8px;
}
#myTable td a
}
#myTable tr{
border-bottom:1px solid #222222;
}
#myTable thead tr, /* notice the use of thead */
#myTable tr:hover {
background-color: #e0f2f1;
text-decoration: none;
}
#myTable tbody tr {
display: none; /* Hide rows by default */
}
#myTable tbody tr.visible {
display: table-row; /* Show them when they match */
}
#myTable tfoot tr:not(.visible) {
display: none; /* Hide the "no results" message if not visible */
}
#myTable tfoot td {
text-align: center;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
and the HTML:
<input class="mt-4 mx-auto" type="text" id="myInput" placeholder="Search"/>
<table class="mb-5" id="myTable" align="center"><tbody>
<tr><td><b>BM: </b>Quip</td><td><p hidden></p></td></tr>
<tr><td><b>BM: </b>Facebook</td><td><p hidden></p></td></tr>
<tr><td><b>BM: </b>Instagram</td><td><p hidden></p></td></tr>
<tr><td><b>BM: </b>Twitter</td><td><p hidden></p></td></tr>
<tr><td><b>BM: </b>Telegram</td><td><p hidden></p></td></tr>
<tr><td><b>BM: </b>Spotify</td><td><p hidden></p></td></tr>
</table>
I would really appreciate all the help. Cheers! :)

HTML:
<input type="text" id="input">
JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('input').addEventListener('input', performSearch);
function performSearch() {
if (this.value.length < 3) return;
// search code
}
});
If you have any questions, ask.

Creating common class in javascript

I have one html page with some div and table inside div. Getting data by using XHTMLREQUEST. How can I make this to wrapper class so I can use it whenever I want in project with some id.
I can create div with id and use that particularturl for the loading data. How can I make it common so I can use it anywhere.
My htmlcode:
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 30%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 30%;
height : 30%;
overflow-y:auto;
border: 1px solid #ddd;
font-size: 18px;
display: none;
margin-top:-12px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
width : 10%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
order-top: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
#myInput:focus + #myTable{
display: block;
}
#myTable:hover{
display: block;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">
<table id="myTable">
<tr class="header"></tr>
<tr><td>Germany</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>UK</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Canada</td></tr>
<tr><td>Italy</td></tr>
<tr><td>UK</td></tr>
<tr><td>France</td></tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
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";
}
}
}
}
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr){
_tr.addEventListener('click',function(){
document.getElementById('myInput').value += " "+ this.getElementsByTagName('td')[0].textContent;
});
});
</script>
</body>
</html>
This is how I am loading the data.
function foo(callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', "data.json",true);
httpRequest.onreadystatechange = function () {
if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
// trigger your callback function
callback(httpRequest.responseText);
}
};
httpRequest.send();
}
foo(function(data) {
var jsonc = JSON.parse(data);
var new_opt="";
for(i=0;i<jsonc.length;i++)
{
new_opt+='<option value="'+jsonc[i]['VALUE']+'">'+jsonc[i]['VALUE']+'</option>';
}
document.getElementById('choose').innerHTML =new_opt;
});
I know this code I can use only for this place. But I want same idea for another div also. I just wann pass some id and create the same div which I using here.
Can anybody help me in Javascript class which should be generic class.