Search Input

<div class="documentation-site-popover-container">
    <div class="fd-popover">
        <div class="fd-popover__control">
            <div aria-label="Image label" aria-controls="F4GcX348bc" aria-expanded="false" aria-haspopup="true">
                <div class="fd-input-group">
                    <input type="text" class="fd-input fd-input-group__input" id="" value="Ba" placeholder="Select Fruit">
                    <span class="fd-input-group__addon fd-input-group__addon--button">
                        <button class="fd-input-group__button fd-button fd-button--transparent sap-icon--search"></button>
                    </span>
                </div>
            </div>
        </div>
        <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="F4GcX348bc">
            <nav class="fd-menu">
            <ul class="fd-menu__list">
                <li><a href="#" class="fd-menu__item"><strong>Ba</strong>nana</a></li>
                <li><a href="#" class="fd-menu__item"><strong>Ba</strong>rk</a></li>
                <li><a href="#" class="fd-menu__item"><strong>Ba</strong>ts</a></li>
            </ul>
            </nav>
        </div>
    </div>
</div>

<br>

<div class="documentation-site-popover-container">
    <div class="fd-popover">
        <div class="fd-popover__control">
            <div aria-label="Image label" aria-controls="F4GcX34b" aria-expanded="false" aria-haspopup="true">
                <div class="fd-input-group">
                    <input type="text" class="fd-input fd-input--compact fd-input-group__input" id="" value="Ba" placeholder="Select Fruit">
                    <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
                        <button class="fd-input-group__button fd-button fd-button--compact fd-button--transparent sap-icon--search"></button>
                    </span>
                </div>
            </div>
        </div>
        <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="F4GcX34b">
            <nav class="fd-menu">
            <ul class="fd-menu__list">
                <li><a href="#" class="fd-menu__item"><strong>Ba</strong>nana</a></li>
                <li><a href="#" class="fd-menu__item"><strong>Ba</strong>rk</a></li>
                <li><a href="#" class="fd-menu__item"><strong>Ba</strong>ts</a></li>
            </ul>
            </nav>
        </div>
    </div>
</div>