How to add Search Suggest at a search bar at the Home page

Help / Discuss
#1

Hi all,

I’ve added a search bar in my home page since my boss wants the search bar to be larger. I’ve added it using this code

{{include reference=“Main.Search” /}}

but when I type a keyworks there is no live suggestion showing up. It is possible to add search suggest and a live suggestion on the search bar I’ve added on the home page? Same function with the search bar at the top right corner?

Thanks

#2

Adding the quick search form / input to a page is relatively easy:

{{velocity}}
#set ($output = $xwiki.getDocument('XWiki.QuickSearchUIX').get('content'))
$output.replace('<li>', '').replace('</li>', '').replace('globalsearch-close', '')
{{/velocity}}

plus some CSS tweaking. The issue is with getting search suggestions and the problem is that currently searchSuggest.js is enhancing only one input (the one from the top bar). It needs to be changed in order to make it enhance multiple inputs. Something like:

--- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/search/searchSuggest.js
+++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/search/searchSuggest.js
@@ -229,7 +229,9 @@ var XWiki = (function (XWiki) {
     #end
     */
     var sources = $jsontool.serialize($sources);
-    new XWiki.SearchSuggest($('headerglobalsearchinput'), sources);
+    $$('#headerglobalsearchinput, .search-suggest').forEach(function(input) {
+      new XWiki.SearchSuggest(input, sources);
+    });
     return true;
   };
#3

I guess the change will be overwritten with the next update if I make a change in the original file.
Is there a way to implement the changes and make them survive the updates?

#4

Yes.

You can write your own JavaScript code that calls new XWiki.SearchSuggest(input, sources) but the problem is the sources parameter, for which you’d have to copy the code from searchSuggest.js that computes its value.

Best is to report an improvement on Loading... and then to create a PR based on the changes I suggested.

Thanks,
Marius

#5

Unfortunately, this recipe does not work for me in version 15.8 and 15.9.
The search bar is not displayed, only the “Search” button is visible. Therefore it is not possible to make a request.

2023-11-13_12-03-19

How to fix it? I would be very grateful for your advice.

#6

Try with:

{{velocity}}
#set ($output = $xwiki.getDocument('XWiki.QuickSearchUIX').get('content'))
$output.replace('<li>', '').replace('</li>', '').replace('globalsearch-close', ''
  ).replace("aria-expanded='false'", "aria-expanded='true'").replace('disabled', '')
{{/velocity}}

but you need to play with the CSS.

Hope this helps,
Marius

1 Like
#7

Yes, it worked! Thank you very much for your quick help, Marius!
Now all that remains is to enable search suggestions, as you wrote above. I haven’t tried it yet.

#8

Thanks, I was facing the same issue when adding a search bar to the homepage. It worked for me as well. Thanks, Marius! Search suggestions are also working fine. Cheers

#9

Hello again!

I was able to add a search bar to the page. And I added the CSS-code to the Xwiki theme to change the size of the search bar.

Next, I made changes to the file searchSuggest.js in my local machine as described:

2023-11-14_16-06-47

Then I restarted Xwiki.
But this doesn’t work, search suggestions are only visible in the top quick search bar:

2023-11-14_16-00-42

Maybe I missed something? Sorry, I’m new in Xwiki.

#10

Probably because it can’t find any element with the CSS class search-suggest. Use the browser’s developer tools to inspect you HTML. If search-suggest CSS class is missing then you should either add it or use a different selector in searchSuggest.js to locate the search input.