I use the wonderful TYPO3 Introduction Package and I use the Solr extension for TYPO3. They work hand in hand very well. I thought I'd demonstrate how to add a search bar to the Introduction Package so that you can have a search bar on every page.

First of all you'll have to create a "Search" page with the Solr plugin on it. That's where the search form will be directed to and also where the search results will be displayed.

Add the following lines to your TypoScript template's "Setup" section. These lines will create a typoscript object called lib.searchbox that contains the preconfigured search box from the official TYPO3 Solr extension:

lib.searchbox < plugin.tx_solr_PiSearch_Search
lib.searchbox.search.targetPage = 1104

Make sure that you replace "1104" in the code above with the page id of your "Search" page.

And now, you'll need to put the lib.searchbox object somewhere in your fluidtemplate.

The location of the file that you may want to insert the lib.searchbox object into is located at typo3conf/ext/bootstrap_package/Resources/Private/Partials/Page/Navigation/Main.html but instead of editing that file directly, you should have a copy of it in your site package or elsewhere in your installation.

First, find the section of text that looks like this:

<header id="page-header" class="bp-page-header navbar navbar-mainnavigation navbar-{theme.navigation.style}{f:if(condition:settings.logo.file,then:' navbar-has-image')}{f:if(condition:theme.navigation.type, else:' navbar-top', then:' navbar-{theme.navigation.type} navbar-fixed-{theme.navigation.type}')}">
    <div class="container">
        <f:if condition="{settings.logo.file}">
            <f:then>
                <f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-image" title="{settings.logo.linktitle}">
                    <img class="navbar-brand-logo-normal" src="{f:uri.image(src: settings.logo.file)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
                    <img class="navbar-brand-logo-inverted" src="{f:uri.image(src: settings.logo.fileInverted)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
                </f:link.page>
            </f:then>
            <f:else>
                <f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-text" title="{settings.logo.linktitle}">{siteTitle}</f:link.page>
            </f:else>
        </f:if>

        <f:if condition="{mainnavigation}">
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavigation" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <nav id="mainnavigation" class="collapse navbar-collapse">
                <f:render partial="DropIn/Navigation/MainBefore" arguments="{_all}" />
                <f:render section="MainNavigation" arguments="{menu: mainnavigation, theme: theme}" />
                <f:render partial="DropIn/Navigation/MainAfter" arguments="{_all}" />
            </nav>
        </f:if>
    </div>
</header>

Edit that part so that it looks like this:

<header id="page-header" class="bp-page-header navbar navbar-mainnavigation navbar-{theme.navigation.style}{f:if(condition:settings.logo.file,then:' navbar-has-image')}{f:if(condition:theme.navigation.type, else:' navbar-top', then:' navbar-{theme.navigation.type} navbar-fixed-{theme.navigation.type}')}">
    <div class="container">
        <f:if condition="{settings.logo.file}">
            <f:then>
                <f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-image" title="{settings.logo.linktitle}">
                    <img class="navbar-brand-logo-normal" src="{f:uri.image(src: settings.logo.file)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
                    <img class="navbar-brand-logo-inverted" src="{f:uri.image(src: settings.logo.fileInverted)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
                </f:link.page>
            </f:then>
            <f:else>
                <f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-text" title="{settings.logo.linktitle}">{siteTitle}</f:link.page>
            </f:else>
        </f:if>

        <f:if condition="{mainnavigation}">
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavigation" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <nav id="mainnavigation" class="collapse navbar-collapse">
                <f:render partial="DropIn/Navigation/MainBefore" arguments="{_all}" />
                <f:render section="MainNavigation" arguments="{menu: mainnavigation, theme: theme}" />
                <f:render partial="DropIn/Navigation/MainAfter" arguments="{_all}" />
            </nav>
        </f:if>
                <div class="container d-lg-none">
                        <div class="d-lg-none"><f:cObject typoscriptObjectPath="lib.searchbox" /></div>
                </div>
    </div>
</header>

Notice that the only lines added were the following lines placed near the bottom:

                <div class="container d-lg-none">
                        <div class="d-lg-none"><f:cObject typoscriptObjectPath="lib.searchbox" /></div>
                </div>

Next find the following block of text:

<f:section name="MainNavigation">
    <f:if condition="{menu}">
        <ul class="navbar-nav">
            <f:for each="{menu}" as="item">
                <f:if condition="{item.spacer}">
                    <f:then>
                        </ul>
                        <ul class="navbar-nav">
                    </f:then>

Edit that so that It looks like this:

<f:section name="MainNavigation">
    <f:if condition="{menu}">
        <ul class="navbar-nav">
            <f:for each="{menu}" as="item">
                <f:if condition="{item.spacer}">
                    <f:then>
                        </ul>

<div class="d-none d-lg-block w-75"><f:cObject typoscriptObjectPath="lib.searchbox" /></div>

                        <ul class="navbar-nav">
                    </f:then>

Notice that the only change was adding:

<div class="d-none d-lg-block w-75"><f:cObject typoscriptObjectPath="lib.searchbox" /></div>

Now you might be wondering why I added the search box twice. 

The first time the search box was added was for it to be visible on small screen sizes. The second time the search box was added was for large screen sizes.

Now you can have a search box on every page of your site and when people press the button they will be directed to the search page where they will see the search results.

 

This information was derived from the TYPO3 Solr extension FAQ page https://docs.typo3.org/typo3cms/extensions/solr/8.0.2/FAQ/Index.html