Dropdown menu with input inside

Question

i want to create a dropdown menu combine input inside as my image ,i use bootstrap

<i>
 <div class="btn-group dropdown" dropdown >
          <button type="button" class="btn btn-default" dropdown-toggle>
            Dropdown
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" id="buttonuser"  role="menu">
            <li>
                <p>Add to</p>
                <input type="text" id="findUser" class="form-control">
            </li>
            <li><a href>Dropdown link</a></li>
            <li><a href>Dropdown link</a></li>
            <li><a href>Dropdown link</a></li>
            <li>Remove</li>
          </ul>
        </div>
</i>

but when i click on input , menu dropdown hide all , i dont want this , please tell me how i do

You need to provide your CSS and any JS you may be using as well... — ThatTechGuy, May 09 '15 at 14:57
Try this idea to stopPropagation http://stackoverflow.com/questions/10863821/bootstrap-dropdown-closing-when-clicked — Eugene Glova, May 09 '15 at 14:58
This has been fixed in upcoming Bootstrap v3.3.5: https://github.com/twbs/bootstrap/issues/16072 — cvrebert, May 10 '15 at 00:13

score 0 · Answer 1 · answered May 09 '15 at 15:00

0

Try to put this script before the end of body or where you have your JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>

answered May 09 '15 at 15:00

Eugene Glova

1,543
1
9
12

score 0 · Answer 2 · answered May 09 '15 at 15:01

0

<script type="text/javascript">
 $('#findUser').click(function(e) {
        e.stopPropagation();
    });
</script>

answered May 09 '15 at 15:01

Ashot Khanamiryan

1,102
12
19

score 0 · Answer 3 · answered May 09 '15 at 15:03

0

Official documentation should help you

answered May 09 '15 at 15:03

bklups

300
1
13

score 0 · Answer 4 · answered May 09 '15 at 15:08

0

Just add this:

$('.dropdown-menu li').click(function(e) {
    e.stopPropagation();
});

answered May 09 '15 at 15:08

Stephan Stanisic

815
7
15

score 0 · Answer 5 · answered Jun 22 '16 at 07:24

0

If you are using bootstrap 3.3.5 this works by default.

answered Jun 22 '16 at 07:24

Dropdown menu with input inside

5 Answers5