As a newcomer to Javascript, I am facing challenges in implementing a searchable feature for the following treegrid.
Simply inserting the method data-search="true" within the <table> tags does not yield the expected results. Only the parent nodes can be searched, while the children remain elusive. Does this mean that I have to develop a custom search function to include both children and parents in the search results?
Perhaps your structure could benefit from a bit more organization. I suggest creating the complete table using HTML and the JavaScript function separately:
Here's an example of how you can set up the HTML table:
<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>
If you wish to add some CSS styling, consider implementing something like this:
<style>
#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;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#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;
}
</style>
To complete the setup, you can include the JavaScript code that will handle the functionality for filtering in the first column or any other specified column:
<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 that 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 trust this information proves beneficial to you! :)
Would it be feasible to showcase the corresponding data in the AutoComplete popover using Tabs? There could be potentially up to three categories of data that match the input value, and my preference would be to present them as tabs. Is there a way to in ...
There is a feature in my code that adds a class when an element with the class .tab is clicked. $(function() { $(".tab").click(function() { $(this).addClass('blueback'); $(".tab").not($(this)).removeClass('bl ...
Currently, I am utilizing MUI makeStyles() to create a series of CSS classes. Within these classes, I am dynamically including and excluding one specific class to my Box element during file drag-and-drop events. The class is successfully added, as I can o ...
I need some assistance with utilizing $q in my Angular application while writing it in TypeScript. I've been facing difficulties and attempted to define a type definition file like so: /// <reference path="../q/Q.d.ts" /> /// <reference path ...
Below is the code used to create a field: <tr><td> <input type="text" value="good" onfocus="if (this.value == 'good') {this.value=''}" onblur="if(this.value == '') { this.value='good'}" name="name" m ...
I have some custom Javascript code that checks for browser support of placeholders and creates them if not supported. This solution works on some older browsers, but not all, especially IE. The issue I am facing is retrieving the "Placeholder" value; curr ...
I have been attempting to utilize BeautifulSoup or Selenium in order to retrieve the Head to Head text or its corresponding div element on betexplorer (link provided below), but my efforts have unfortunately proved to be unsuccessful. Despite being able to ...
When I select the username1 option from the dropdown, the toggle for spec view in the right card should turn off. However, the code is not functioning as expected. html code: <div class="container"> <div class="row row-cols-2" ...
Presented below is a dataset: persons = [ { "age":20, "parameter1":94, "name":"Foobarin" }, { "age":33, "parameter1":49, "name":"Johan" } ] I am looking to develop a sophisticated live search functionality that can identify specific ...
I'm working on an AngularJS calculator project and I'm struggling to limit the decimal point to only one when performing calculations. Currently, clicking the "." button in the calculator results in two dots appearing, which is not valid for deci ...
I can't seem to find the source of the 2 silver borders in my modal. I've checked the CSS code, tried using developer tools, and looked through the entire code but still can't figure it out. Here is the JSX code I'm working with: impor ...
First, I need to ensure that the field is validated for any characters not included in this set: /[ùûüÿ€’“”«»–àâæçéèêëïîôœ]/. If a user enters a character outside of this set, I want Yup to trigger an error message. Secondly, I ...
I am using PrimeFaces along with jquery.zoomy on my website. I have a collection of small and large images for zooming and a gallery displaying 3 images, along with 2 buttons for scrolling through the images. I tried implementing some code from this sour ...
How are you doing today? I recently discovered a new technique on this website that allowed me to draw a rectangle on an HTML5 canvas with the click of a button. However, I encountered an issue where the previous rectangle would disappear every time I tri ...
I'm trying to create a simple animation using setInterval in JavaScript. The goal is to make an image move from left to right. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"& ...
I have been attempting to modify the text within a div without much success. After searching around, I have found the following code: <script type="text/javascript"> function UpdateDiv(fieldname, text) { document.getElementById(fieldname ...
I am currently working on a project where I am looking to repurpose the following example: All I need to do is add a trigger that will start the animation on a click event. I have successfully set this up to run on my server by using the code from https: ...
Currently, I'm trying to determine whether my implementation of the ngrx and sandbox pattern is effective. Here's the issue I'm facing: getFiles(userId: number, companyId: number) { this.fileService.getFiles(userId, companyId).subscribe(re ...
I came across these solutions, but I'm having trouble implementing them: Dealing with an empty array in a callback function Node.js issue with returning an empty array Within the app.post function towards the end of the code, there is a 'c ...
I'm tasked with creating a small app prototype for a school assignment that interacts with the Forecast.io API. While I don't have much experience working with APIs, the code seems clean and functional. However, within Brackets, JSHint is flaggi ...