Develop Reference

How to amending code to check if dropdown has value THEN search within that - ASP.NET/JS

I have a table called myTable which displays a list of files. I then have a dropdown box and a search box.
All of this functionality works, if i search for a PO no, and if i select a vendor - this all works fine.
I want to amend my JS code for the search box to check if the dropdown is populated, and if it is then take that into consideration when searching for a PO no.
My cshtml code is as follows:
<h1 style="color: white">Purchase Orders</h1>
<p>
<a asp-page="Create" style="color:white">Create File</a>
</p>
<div class="row">
<div class="col-sm-12">
<div class="form-check-inline pull-right">
<label style="color:white">Search</label>
<input type="text" class="form-control" id="myInput" placeholder="Search Purchase Orders..." onkeyup="myFunction()" />
</div>
<select asp-items="#((List<SelectListItem>)ViewData["test"])" id="vendor" onchange="myFunctionThree()">
<option value="" disabled selected> Select a Vendor</option>
</select>
<input class="btn btn-light" value="Clear All Filters" onclick="history.go(0)" style="float: right">
<table class="table" style="background-color: white" id="myTable">
<thead>
<tr class="header">
<th>
PO No.
</th>
<th>
Haulier
</th>
<th>
Comments
</th>
<th>
Vendor
</th>
<th>
Upload
</th>
<th>
Date Uploaded
</th>
<th>Download</th>
<th>Delete Attachment</th>
<th>Notify</th>
<th>Sent</th>
<th>
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Files)
{
if (item.FileType == "Purchase Order")
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Number)
</td>
<td>
#Html.DisplayFor(modelItem => item.Haulier)
</td>
<td>
#Html.DisplayFor(modelItem => item.Comments)
</td>
<td>
#Html.DisplayFor(modeItem => item.Vendor.VendorName)
</td>
<td>
<a asp-page="Upload" asp-route-id="#item.Id">Upload File Attachment</a>
</td>
<td>
#Html.DisplayFor(modelItem => item.UploadDate)
</td>
<td>
#if (item.Attachment != null)
{
<form asp-page-handler="Download" method="post" asp-route-id="#item.Id">
<input type="submit" class="btn btn-dark" value="Download">
</form>
}
</td>
<td>
#if (item.Attachment != null)
{
<form asp-page-handler="Delete" method="post" asp-route-id="#item.Id">
<input type="submit" class="btn btn-danger" value="Delete Attachment">
</form>
}
</td>
<td>
#if (item.Attachment != null)
{
<form asp-page-handler="Email" method="post" asp-route-id="#item.Id">
<input type="submit" class="btn btn-danger" value="Notify Vendor">
</form>
}
</td>
<td>
#Html.DisplayFor(modelItem => item.EmailSent)
</td>
<td>
<a asp-page="/Admin/Details" asp-route-id="#item.Id">Details</a>
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
<script>
//function for search bar
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";
}
}
}
}
}
//function for dropdown menu
function myFunctionThree()
{
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("vendor");
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")[3];
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 am not too familiar with js, so if someone could point me in the right direction please.
If you need any further info lmk.

After some tinkering around with the code, I found a solution that works.
Finalised code(for search bar script):
//function for search bar
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue, dropdownValue, dropdownInput, dtd;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
dropdownInput = document.getElementById("vendor");
dropdownValue = dropdownInput.value.toUpperCase();
// 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];
dtd = tr[i].getElementsByTagName("td")[3];
if (td) {
txtValue = td.textContent || td.innerText;
dropTxtValue = dtd.textContent || dtd.innerText;
if(dropdownValue == ""){
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
else{
if((txtValue.toUpperCase().indexOf(filter) > -1) && (dropTxtValue.toUpperCase().indexOf(dropdownValue) > -1)){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}
}
}
}

Filter Table with CSS and JS

I have a dynamic table that I am displaying in the front end like this:
<table id ="tblRE">
<tr class="row">
<th ng-repeat="column in cols_re">{{column}}</th>
</tr>
<tr ng-repeat="row in data['dict_re']">
<td ng-repeat="column in cols_re">{{row[column]}}</td>
</tr>
</table>
I want to put a filter on one of the columns named OUT(my 2nd column from the table).
If I would have a fix column name I would do like this:
<tr class="row">
<td class="head" ng-click="sortData='OUT';sortOrder=!sortOrder"> OUT</td>
</tr>
<tr ng-repeat="item in data.table_df| orderBy:sortData:sortOrder | filter:filter ">
<td>{{ item.OUT}}</td>
</tr>
Is there an option on how I can put the filter with my initial option?
I also tried to add a search button which kind of works only for the first column. I want to be able to filter also on the second column.
The code for the search button:
js:
function searchre() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("tblRE");
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";
}
}
}
}
and in HTML:
<input class="myInput" type="text" id="myInput" onkeyup="searchre()" placeholder="Search.." title="Type in a name">
Any idea on how I can filter on the first and 2nd column?

onKeyup event myfunction is not returning expected matching data as entered in the text box from the <td>list <td>obj it should filter data from list

home.jsp
<input type="text" id="myContractNumberInput" ng-model="contractno"
ng-change="getContractnNo()" onkeyup="myFunction()" name="contractno"
placeholder="Contract Number.." size="35">
<hr>
<ul>
<li data-ng-repeat="contractTypeData in contractDetailsList">
<table id="myContractTable" border="1">
<tr>
<td>{{contractTypeData.contractId}}</td>
<td>{{contractTypeData.contractDes}}</td>
</tr>
</table>
</li>
</ul>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myContractNumberInput");
filter = input.value.toUpperCase();
table = document.getElementById("myContractTable");
tr = table.getElementsByTagName("tr");
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";
}
}
}
}
The above function on key event must return the entered matching data from the list object as it is not returning the expected data which is entered in text box

You can use angular filter for filtration of result using search input field, please find below example, also there is no need to use myFunction for this filtration, and for any other custom logic, you can create your own custom filter (follow this link https://docs.angularjs.org/api/ng/filter/filter):
function TodoCtrl($scope) {
$scope.contractDetailsList = [
{'contractId': 1,
'contractDes': 'one'},
{'contractId': 2,
'contractDes': 'two'},
{'contractId': 3,
'contractDes': 'three'}
]
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<input type="text" id="myContractNumberInput" ng-model="contractno" name="contractno" placeholder="Contract Number.." size="35">
<hr>
<table id="myContractTable" border="1">
<tr>
<td>ID</td>
<td>Description</td>
</tr>
<tr data-ng-repeat="contractTypeData in contractDetailsList | filter:contractno">
<td>{{contractTypeData.contractId}}</td>
<td>{{contractTypeData.contractDes}}</td>
</tr>
</table>
</div>

am unable to redirect to filtered table page

I wanted to filter my table by ticket Name. Despite the table getting filtered it is getting redirected to the unfiltered table after 10 seconds. My app.js page is coded in such a way that it should render result.js only.
//Function to filter the table element by ticketName
function myFunction() {
alert("Fetching table result")
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value;
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.startsWith(filter)) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
HTML:
<!-- Getting ticketName wise value-->
<form onsubmit="myFunction();return true" action="/result" method="GET">
<div id="ticketDate">
TICKET NAME:
<input type="text" name="myInput" id="myInput">
<input type="submit" name="submit" id="submit" value="submit">
</div>
</form>`
displaying Table contents
<% for (var i = 0; i < ticketNameArr.length; i++) { %>
<tr>
<td><%=ticketNameArr[i].TicketName%> </td>
<td><%=ticketNameArr[i].InputLocationMessage%></td>
<td><%=ticketNameArr[i].ResultLocationMessage%></td>
<td><%=ticketNameArr[i].FTPSTATUS%> </td>
<td><%=ticketNameArr[i].TicketStatusInput%></td>
<td> <%=ticketNameArr[i].TicketStatusResult%> </td>
<td> <%=ticketNameArr[i].LogStatus%> </td>
<td> <%=ticketNameArr[i].ReportStatus%> </td>
<td><%=ticketNameArr[i].InputTime%></td>
<td><%=ticketNameArr[i]. InputModifiedTime%></td>
<td><%=ticketNameArr[i].OutputTime%></td>
<td><%=ticketNameArr[i]. OutputModifiedTime%></td>
<td><%=ticketNameArr[i].LogCreateTime%></td>
<td><%=ticketNameArr[i]. LogModifiedTime%></td>
<td><%=ticketNameArr[i]. FtpTime%></td>
</tr>
<% } %>

How to create a filtered search table using reactJS. Trying to get my search bar to filter the info in the table

I am trying to get my search bar to actually filter the information in my table. I have created a both a table and a search bar but the search bar currently has no functionality. Right now I can type in the search box but nothing happens. I think this might have to do with the fact that I am using react and not just JS alone. I would simply like to be able to search by name(so the info in the first column). I am not very familiar with creating components and have looked at every tutorial and watched endless videos but have not been able to get anything to work. Anything will help, Thanks!
This is my code:
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<Route
path="/list"
exact
strict
render={() => {
function myFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var tr = table.getElementsByTagName("tr");
var td, i;
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";
}
}
}
}
return (
<div>
<div className="spacing overflow">
<input
type="search"
id="myInput"
onsearch="myFunction()"
onkeyup="myFunction()"
placeholder="Search Here"
/>
<table className="table table-bordered" id="myTable">
<tr>
<th> Name </th>
<th> API </th>
<th> Product </th>
</tr>
<tr>
<td>
Expert{" "}
</td>
<td>
<a href="http://localhost:3000/list-expert">
Credit{" "}
</a>
</td>
<td> ADD NAME </td>
</tr>
<tr>
<td>
Lex
</td>
<td>
Phone
</td>
<td> ADD NAME </td>
</tr>
<tr>
<td>
Lex
</td>
<td>
IM
</td>
<td> ADD NAME </td>
</tr>
<tr>
<td>
star
</td>
<td>
Verify
</td>
<td> ADD NAME </td>
</tr>
</table>
</div>
</div>
);
}}
/>
</div>
</BrowserRouter>
);
}
}

I was simply missing { } around myFunction instead of " "
so it should look like this:
onKeyUp={myFunction}