Forum Discussion
oskarkuus
Jun 01, 2023Copper Contributor
Search on one page - faq page with search function at top?
Hi I wonder if it is possible to create a page that have a search bar that can be used to search on that page. A page that allow the users to search the content on that specific page ...
SvenSieverding
Jun 04, 2023Bronze Contributor
Hi oskarkuus ,
i understand that you have a single page with many questions and answers on it.
Now you want to have a functionality like "STRG-F" to search for content on that page and let the user directly jump to the search results.
AFAIK there is no functionality to achieve something like that out of the box. (And using a quick google search i did not find a custom solution... So you might have to build one from scratch)
The search webparts won't help you much as they are intended to search for content in multiple documents and give you a list of these documents and not for searching and highlighting content on the same page.
But if you restructure your content you can alternatively do the following:
Option 1)
Split your singular content page into many, many little "question and answer" pages. Now you can either use the "default" SharePoint search or a custom search page to let the user search for the little question and answer pages. This works great if you also create a new site collection just for all of the FAQ pages. Then you can limit the search queries to just search just in that site collection for FAQ content.
Option 2)
Create a new list with a question and answer column and apply this view formatting "https://github.com/pnp/List-Formatting/tree/master/view-samples/faqs"
Now you have an FAQ page like this
and you simply can search in that list using the top search bar to filter that page for content
Best Regards,
Sven
- oskarkuusJun 04, 2023Copper Contributor
On option 2.
How do i install/implement that view on a list. How do i use the github code?
- SvenSieverdingJun 04, 2023Bronze Contributor
Hi oskarkuus ,
You need to do the following to use the code from the github respository.
1) Create a new list
2) Add a new multiline text column to that list and name it "Answer" (with a capital "A")
2b) Add your questions. Put the question in the title column and the answer in the "Answer" column.
3) Then click on the view selector (You should be on the "All Items" view)
4) Select "Format current view" (The last entry in that menu)5) Scroll down and select "Advanced Mode"
6) Copy & paste the contents of
https://github.com/pnp/List-Formatting/blob/master/view-samples/faqs/faqs.json
into the editor field7) Click Save
Best Regards,
Sven