js: populate new layout

public/partdb.js

@@ -2,12 +2,13 @@
 
 // the last search query
 var last_search = null;
+// the collection of parts
+var parts = null;
 
 function search()
 {
 	const terms = document.getElementById('terms');
 	if (terms && terms.value && terms.value.length >= 3) {
-		console.log(terms.value);
 	} else {
 		return;
 	}
@@ -17,7 +18,8 @@ function search()
 	xhr.open('GET', last_search, true);
 	xhr.onload = function() {
 		if (this.responseURL.endsWith(last_search)) {
-			populate(JSON.parse(this.response));
+			parts = JSON.parse(this.response)
+			results();
 		}
 	};
 	xhr.onerror = function() {
@@ -26,18 +28,34 @@ function search()
 	xhr.send();
 }
 
-function populate(parts)
+function results()
 {
-	const results = document.getElementById('results');
-	results.innerHTML = null;
+	const select = document.getElementById('results');
+	select.innerHTML = null;
 	for (const part of parts) {
-		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);
+		const option = document.createElement('option');
+		option.setAttribute('value', part.id);
+		option.innerHTML = part.name + " (" + part.description + ")";
+		select.appendChild(option);
+	}
+}
+
+function select()
+{
+	const results = document.getElementById('results');
+	const variants_select = document.getElementById('variants');
+	const pinout_preview = document.getElementById('pinout_preview');
+	if (results.selectedIndex >= 0) {
+		let part_selected = parseInt(results.options[results.selectedIndex].value);
+		for (const part of parts) {
+			if (part.id == part_selected) {
+				const fields = ["name", "description"];
+				for (const field of fields) {
+					const input = document.getElementById('part_' + field);
+					input.value = part[field];
+				}
+			}
+		}
 	}
 }