Incompatible with porto theme version 4.0.5 here is the full solution Magento 2.4.5

[o0mohd0o]

Hi, I have 2.4.5 Magento 2 I had hard time to fix this.

this is the modification I have done in latest porto theme.

1- first modify this file /app/design/frontend/Smartwave/porto/Magento_CatalogSearch/web/css/source/_module.less

search for these:

@autocomplete-background
@autocomplete-border
@autocomplete-item-border
@autocomplete-item-hove
@autocomplete-item-amount-color

and replace them with these variables in whole file:
@autocomplete__background-color
@autocomplete__border
@autocomplete-item__border
@autocomplete-item__hover__color
@autocomplete-item-amount__color

in this file app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml

replace the follwoing:

        <referenceContainer name="page.wrapper">
          <block class="Smartwave\Porto\Block\Template" name="porto_header" template="html/header.phtml" before="main.content">
              <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
                  <arguments>
                      <argument name="css_class" xsi:type="string">header links</argument>
                  </arguments>
              </block>
              <block class="Smartwave\Porto\Block\Form\Login" name="header_customer_form_login" ifconfig="porto_settings/header/login_popup" template="Smartwave_Porto::html/login.phtml"/>
              <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
              <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
              <block class="Smartwave\Porto\Block\Template" name="custom_block" template="html/header_custom_block.phtml" ifconfig="porto_settings/header/static_block" after="-"/>
              <block class="Smartwave\Porto\Block\Template" name="custom_block_top" template="html/top_custom_block.phtml" ifconfig="porto_settings/header/static_block_top" after="-"/>
              <block class="Smartwave\Porto\Block\Template" name="custom_block_menu" template="html/header_custom_block_menu.phtml" after="-"/>
              <block class="Smartwave\Porto\Block\Template" name="porto_custom_notice" template="html/custom_notice.phtml" after="-"/>
          </block>
        </referenceContainer>

with this:

        <referenceContainer name="page.wrapper">
          <block class="Smartwave\Porto\Block\Template" name="porto_header" template="html/header.phtml" before="main.content">
              <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
                  <arguments>
                      <argument name="css_class" xsi:type="string">header links</argument>
                  </arguments>
              </block>
              <block class="Smartwave\Porto\Block\Form\Login" name="header_customer_form_login" ifconfig="porto_settings/header/login_popup" template="Smartwave_Porto::html/login.phtml"/>
              <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
              <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
              <block class="Smartwave\Porto\Block\Template" name="custom_block" template="html/header_custom_block.phtml" ifconfig="porto_settings/header/static_block" after="-"/>
              <block class="Smartwave\Porto\Block\Template" name="custom_block_top" template="html/top_custom_block.phtml" ifconfig="porto_settings/header/static_block_top" after="-"/>
              <block class="Smartwave\Porto\Block\Template" name="custom_block_menu" template="html/header_custom_block_menu.phtml" after="-"/>
              <block class="Smartwave\Porto\Block\Template" name="porto_custom_notice" template="html/custom_notice.phtml" after="-"/>
              <block class="Smile\ElasticsuiteCore\Block\Search\Form\Autocomplete" name="top.search" as="topSearch" template="Smile_ElasticsuiteCore::search/form.mini.phtml">
                <arguments>
                    <argument name="rendererList" xsi:type="array">
                        <item name="term" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Search terms</item>
                            <item name="template" xsi:type="string">Smile_ElasticsuiteCore/autocomplete/term</item>
                        </item>
                    </argument>
                </arguments>
              </block>
          </block>
        <referenceBlock name="top.search">
            <arguments>
                <argument name="rendererList" xsi:type="array">
                    <item name="product" xsi:type="array">
                        <item name="title" xsi:type="string" translate="true">Products</item>
                        <item name="template" xsi:type="string">Smile_ElasticsuiteCatalog/autocomplete/product</item>
                    </item>
                    <item name="category" xsi:type="array">
                        <item name="title" xsi:type="string" translate="true">Categories</item>
                        <item name="template" xsi:type="string">Smile_ElasticsuiteCatalog/autocomplete/category</item>
                    </item>
                    <item name="product_attribute" xsi:type="array">
                        <item name="title" xsi:type="string" translate="true">Attributes</item>
                        <item name="template" xsi:type="string">Smile_ElasticsuiteCore/autocomplete/term</item>
                        <item name="titleRenderer" xsi:type="string">Smile_ElasticsuiteCatalog/js/autocomplete/product-attribute</item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>