Plusieurs menus déroulants dans une entrée de groupe à l'aide de bootstrap 3

Je suis en train de faire une barre de recherche qui devrait ressembler à quelque chose comme ceci:

http://s22.postimg.org/ecaxmtj8x/search_bar.png

Je suis en utilisant bootstrap 3. Dans le code ci-dessous j'ai 3 boutons, où le "menu 2" bouton ouvre un menu déroulant. Je voudrais que le menu "1" sur le bouton pour ouvrir un menu. Mais pour l'instant, mes tentatives ont échoué.

Quand j'essaie de regrouper les boutons dans un btn-group, il se sépare de l'rejoint barre de recherche, ce qui n'est pas ce que je veux. Est-il possible d'avoir 2 menus à l'intérieur d'une div à l'aide de l'entrée-le groupe classe?

<div class="input-group input-group-lg">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button class="btn btn-primary" type="button">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <button class="btn btn-primary" type="button">
            test 1&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            test 2&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</div>

OriginalL'auteur Asgher Qureshi | 2013-09-27