I have created a smart search ponent inside a dropdown menu. User should be allowed to search within the dropdown depending upon the value entered in the input=text provided in menu.

But when i am clicking on the input the menu gets closed. I tried using preventDefault as well but still it is not working.

HTML:

<input type="text" readonly="readonly" value="">
<button class="btn i dropdown-toggle" data-toggle="dropdown"> <i class="caret-down"></i>
</button>
<div class="dropdown-menu smart">
    <input type="text" placeholder="Search">
    <ul class="search-options">
        <li><a href="#">Something</span></a>
        </li>
    </ul>
</div>

JS:

// jQuery to prevent default close 
$('body').on('click', '.dropdown-menu.smart input', function (event) {
    event.preventDefault();
});

I have created a smart search ponent inside a dropdown menu. User should be allowed to search within the dropdown depending upon the value entered in the input=text provided in menu.

But when i am clicking on the input the menu gets closed. I tried using preventDefault as well but still it is not working.

HTML:

<input type="text" readonly="readonly" value="">
<button class="btn i dropdown-toggle" data-toggle="dropdown"> <i class="caret-down"></i>
</button>
<div class="dropdown-menu smart">
    <input type="text" placeholder="Search">
    <ul class="search-options">
        <li><a href="#">Something</span></a>
        </li>
    </ul>
</div>

JS:

// jQuery to prevent default close 
$('body').on('click', '.dropdown-menu.smart input', function (event) {
    event.preventDefault();
});

• javascript
• jquery
• html
• css
• drop-down-menu

• Your code seems to be correct and should be working. But this is inplete - plz. provide also css and dropdown code so I'll be able to check this out. Jsfiddle would be most apreciated. – Hexodus Commented Nov 22, 2013 at 12:20

1 Answer 1

Write the following code and it should keep the dropdown open

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