Merge pull request #1303 from kinow/fix-search-autocomplete

Fix typeahead and handlebars template.
NatLibFi · Apr 26, 2022 · dd94d44 · dd94d44
2 parents df06b59 + 2c76ebc
commit dd94d44
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/resource/css/styles.css b/resource/css/styles.css
@@ -159,6 +159,7 @@ a, a.versal, .nav-link, .nav-link.active, .jstree-node > .jstree-anchor {
 
 .replaced {
   font-style: italic;
+  color: var(--gray-900) !important;
 }
 
 .nav-link:link,.nav-link:visited,.nav-link:active,.nav-link:hover,.nav-link:focus {
@@ -2073,9 +2074,8 @@ span.date-info {
   overflow: hidden;
 }
 
-p.autocomplete-label {
+.autocomplete-label > span {
   color: var(--medium-color);
-  display: block;
   margin: 0;
 }
 

diff --git a/resource/js/docready.js b/resource/js/docready.js
@@ -749,33 +749,35 @@ $(function() { // DOCUMENT READY
   concepts.initialize();
 
   var autocompleteTemplate =[
-    '{{# if matched }}<p>{{matched}}{{# if lang}} ({{lang}}){{/if}} = </p>{{/if}}',
-    '{{# if replaced }}<p class="replaced">{{replaced}}{{# if lang}} ({{lang}}){{/if}} &rarr; </p>{{/if}}',
-    '{{# if notation }}<p>{{notation}}</p>{{/if}}',
-    '<p class="autocomplete-label">{{label}}{{# if lang}}{{# unless matched }}<p>({{lang}})</p>{{/unless}}{{/if}}</p>',
+    '<div class="autocomplete-label">',
+    '{{# if matched }}<span>{{matched}}{{# if lang}} ({{lang}}){{/if}} = </span>{{/if}}',
+    '{{# if replaced }}<span class="replaced">{{replaced}}{{# if lang}} ({{lang}}){{/if}} &rarr; </span>{{/if}}',
+    '{{# if notation }}<span>{{notation}}</span>{{/if}}',
+    '<span>{{label}}{{# if lang}}{{# unless matched }}<span>({{lang}})</span>{{/unless}}{{/if}}</span>',
     '{{# if typeLabel }}<span class="concept-type">{{typeLabel}}</span>{{/if}}',
+    '</div>',
     '<div class="vocab">{{vocabLabel}}</div>'
   ].join('');
 
   if ($('.headerbar').length > 0) {
     var dark = ($('#search-field').val().length > 0) ? ' clear-search-dark' : '';
     var clearButton = '<span class="versal clear-search' + dark + '">&#215;</span>';
 
-    var $typeahead = $('#search-field').typeahead({ hint: false, highlight: true, minLength: autocomplete_activation },
+    var $typeahead = $('#search-field').typeahead({hint: false, highlight: true, minLength: autocomplete_activation},
       {
         name: 'concept',
         limit: autocomplete_limit,
-        displayKey: 'label',
+        display: 'label',
         templates: {
           empty: Handlebars.compile([
             '<div><p class="autocomplete-no-results">{{#noresults}}{{/noresults}}</p></div>'
           ].join('')),
           suggestion: Handlebars.compile(autocompleteTemplate)
         },
         source: concepts.ttAdapter()
-    }).on('typeahead:cursorchanged', function() {
+      }).on('typeahead:cursorchanged', function () {
       $('.tt-dropdown-menu').mCustomScrollbar("scrollTo", '.tt-cursor');
-    }).on('typeahead:selected', onSelection).on('focus', function() {
+    }).on('typeahead:selected', onSelection).on('focus', function () {
       $('#search-field').typeahead('open');
     }).after(clearButton).on('keypress', function() {
       if ($typeahead.val().length > 0 && $(this).hasClass('clear-search-dark') === false) {
@@ -1060,7 +1062,7 @@ $(function() { // DOCUMENT READY
   if ($replaced.length > 0) {
     var $replacedElem = $('.replaced-by h3');
     var undoUppercasing = $replacedElem.text().substr(0,1) + $replacedElem.text().substr(1).toLowerCase();
-    var html = ''
+    var html = '';
     for (var i = 0; i < $replaced.length; i++) {
         var replacedBy = '<a href="' + $replaced[i] + '">' + $replaced[i].innerHTML + '</a>';
         html += '<p class="alert-replaced">' + undoUppercasing + ': ' + replacedBy + '</p>';