Changes for page CLB Search Component

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -14,6 +14,14 @@
14	14	template.innerHTML = htmlString;
15	15	return template;
16	16	}
	17	+
	18	+ $(selector) {
	19	+ return this.shadowRoot.querySelector(selector);
	20	+ }
	21	+
	22	+ $$(selector) {
	23	+ return this.shadowRoot.querySelectorAll(selector);
	24	+ }
17	17	}
18	18
19	19	customElements.define('clb-simplified-search',
...	...	@@ -32,30 +32,35 @@
32	32	}
33	33
34	34
35		- handleSearch() {
	43	+ handleSearch = () => {
36	36	fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`)
37		- .then(res => res.json())
38		- .then(this.renderResults);
	45	+ .then(res => res.json())
	46	+ .then(this.renderResults);
	47	+
39	39	}
40	40
41	41	get searchInput() {
42		- return this.shadowRoot.querySelector('input[type="text"]');
	51	+ return this.$('input[type="text"]');
43	43	}
44	44
45	45	get searchButton() {
46		- return this.shadowRoot.querySelector('button');
	55	+ return this.$('#button');
47	47	}
48	48
	58	+
49	49	get searchInputTemplate() {
50		- return this.createTemplate('<div><input type="text"><button>Search</button><div id="results"></div></div>');
	60	+ return this.createTemplate(`
	61	+ <div>
	62	+ <input type="text"><button id="search">Search</button>
	63	+ <div id="results"></div>
	64	+ <button id="prev">prev</button>
	65	+ <button id="next">next</button>
	66	+ </div>
	67	+ `);
51	51	}
52	52
53		- resultsContainer = () => {
54		- return this.shadowRoot.querySelector('#results');
55		- }
56		-
57	57	renderResults(results) {
58		- const resultsContainer = this.shadowRoot.querySelector('#results');
	71	+ const resultsContainer = this.$('#results');
59	59	resultsContainer.replaceChildren();
60	60	for(let i = 0, j = results.length; i < j; i++) {
61	61	const { title_, spaces, doccontent_en } = results[i];
...	...	@@ -104,4 +104,5 @@
104	104	}
105	105	);
106	106	</script>
	120	+<clb-simplified-search></clb-simplified-search>
107	107	{{/html}}