Changes for page CLB Search Component
Last modified by bougault on 2023/01/17 11:42
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -48,10 +48,12 @@ 48 48 connectedCallback() { 49 49 super.connectedCallback(); 50 50 this.render(); 51 + const searchInput = this.$('input[type="text"]'); 51 51 this.$('#search').addEventListener('click', this.handleSearch); 52 52 this.$('#prev').addEventListener('click', this.handlePrevPage); 53 53 this.$('#next').addEventListener('click', this.handleNextPage); 54 - this.$('input[type="text"]').focus(); 55 + searchInput.addEventListener('keypress', this.handleKeyPress); 56 + searchInput.focus(); 55 55 } 56 56 57 57 disconnectedCallback() { ... ... @@ -58,6 +58,7 @@ 58 58 this.$('#search').removeEventListener('click', this.handleSearch); 59 59 this.$('#prev').removeEventListener('click', this.handlePrevPage); 60 60 this.$('#next').removeEventListener('click', this.handleNextPage); 63 + this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress); 61 61 } 62 62 63 63 get styles() { ... ... @@ -85,6 +85,11 @@ 85 85 .then(this.renderResults); 86 86 } 87 87 91 + handleKeyPress = (e) => { 92 + if(e.code === 'Enter') { 93 + this.handleSearch(); 94 + } 95 + } 88 88 89 89 get html() { 90 90 return ` ... ... @@ -104,7 +104,7 @@ 104 104 const { title_, spaces, doccontent_en } = results[i]; 105 105 const elt = document.createElement('clb-search-result'); 106 106 elt.setAttribute('data-title', title_); 107 - elt.setAttribute('data- href', spaces.join('/'));115 + elt.setAttribute('data-breadcrumbs'); 108 108 elt.innerHTML = doccontent_en; 109 109 resultsContainer.appendChild(elt); 110 110 } ... ... @@ -126,8 +126,8 @@ 126 126 return this.getAttribute('data-title'); 127 127 } 128 128 129 - get hrefAttr() {130 - return this.getAttribute('data- href');137 + get breadcrumbsAttr() { 138 + return this.getAttribute('data-breadcrumbs'); 131 131 } 132 132 133 133 get styles() { ... ... @@ -140,7 +140,7 @@ 140 140 get html() { 141 141 return ` 142 142 <div> 143 - <a href=${this. hrefAttr}>${this.titleAttr}</a>151 + <a href="/bin/view/${this.breadcrumbsAttr.join("/")}>${this.titleAttr}</a> 144 144 <div> 145 145 <slot></slot> 146 146 </div>