Hi I want to create a simple page where a user enters a postcode an a filtered list is displayed from the read csv file matching the postcode. I have managed to read the file and can output to a table but I'm stuck on the query / filtering part and need to some guidance on connecting the dots. I am a newbie to Javascript and found some exmaples that either are not quite what I am lookingf for or didnt work".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Read CSV</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
table, th, td {
border: 1px solid;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div class="center">
<h1 class=>Search for your next visit from Us</h1>
<h2 class=>Enter your Postcode?</h2>
<form id="form">
<input class="form-control" id="user-input" placeholder="Enter Site Postcode">
<button id="button" class="btn btn-secondary">Find Visit!</button>
</form>
<table class="table" cellpadding="10">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Sitename</th>
<th scope="col">PostalCode</th>
<th scope="col">Service</th>
<th scope="col">NextDuty</th>
</tr>
</thead>
<tbody>
<script type="text/javascript" charset="utf-8">
d3.text("sample_rev.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("div").attr("class", "container")
.append("table").attr("class", "table table-hover")
.append("tbody")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) {
return d;
}).enter()
.append("td")
.text(function(d) {
return d;
});
});
</script>
</tbody>
</div>
</body>
</html>