79 lines
1.5 KiB
HTML
79 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>electronic parts database explorer</title>
|
|
<script type='application/javascript'>
|
|
"use strict";
|
|
|
|
// the last search query
|
|
var last_search = null;
|
|
|
|
function search()
|
|
{
|
|
const terms = document.getElementById('terms');
|
|
if (terms && terms.value && terms.value.length >= 3) {
|
|
console.log(terms.value);
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
last_search = '/search/' + terms.value;
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open('GET', last_search, true);
|
|
xhr.onload = function() {
|
|
if (this.responseURL.endsWith(last_search)) {
|
|
populate(JSON.parse(this.response));
|
|
}
|
|
};
|
|
xhr.onerror = function() {
|
|
console.log("search call failed");
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function populate(parts)
|
|
{
|
|
const results = document.getElementById('results');
|
|
results.innerHTML = null;
|
|
for (const part of parts) {
|
|
console.log(part);
|
|
const tr = document.createElement('tr');
|
|
for (const key of ["name", "description"]) {
|
|
const td = document.createElement('td');
|
|
td.innerHTML = part[key];
|
|
tr.appendChild(td);
|
|
}
|
|
results.appendChild(tr);
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
table {
|
|
border: 1px #E1E3F2 solid;
|
|
width: 500px;
|
|
resize: both;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<form>
|
|
<input type="text" id="terms" name="terms" placeholder="search terms" oninput="search()"><br>
|
|
</form>
|
|
</div>
|
|
<div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>name</th>
|
|
<th>description</th>
|
|
<th>stock</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="results"></tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|