alwaysVBNET alwaysVBNET - 8 months ago 28
Javascript Question

Dynamic textbox on Boostrap UL - unable to type

I have added dynamically a textbox to the bottom of the ul as an option. When I try to type inside the focus is lost. If I remove the

and the use clicks on the textbox, then the list closes.
How can I type inside my custom textbox
the same way it allows typing on the 'Search' box without closing the list? The
has value '2' when loaded.

Here is the fiddle


<script type="text/javascript">
var customOption = "<li class='multiselect4-item multiselect-filter' value='0'><div class='input-group'><input class='xxx' id='txtCategory' value='2'><input type='button' id='btnAddOption' value='Add'></div></li>";
$(document).ready(function () {

enableFiltering: true,
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
includeSelectAllOption: true,
onDropdownShow: function (select, container) {
//var siz = parseInt($('#theParentx').height(),5) + parseInt($('#theParentx .multiselect-container').height(), 10) + parseInt($('#theChildx').height(),7);
//var w = $('#theParentx .multiselect-container').width();
//$('#theChildx').css({ 'top': siz + "px", 'width': w }).show();
onDropdownHide: function (event) {
templates: {
divider: '<li class="multiselect-item divider"></li>',
liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'

var data = [{
title: 'First group',
children: [{ label: 'Cheese', value: 'cheese' , selected: true},
{ label: 'Tomatoes', value: 'tomatoes', selected: false, "attributes": {"some-attribute": 1, "another-attribute": false } }]
}, {
title: 'Second group',
children: [{ label: 'Mozzarella', value: 'mozzarella' },
{ label: 'Mushrooms', value: 'mushrooms' }]

$("#example-post-checkboxName").multiselect('dataprovider', data);
//add actions on dynamically created button
$('.dropdown-menu').on("click", "#txtCategory", function (e) {
$('.dropdown-menu').on("click", "#btnAddOption", function () {
// alert('clicked');
var theValue = '<option>' + $('#txtCategory').val() + '</option>';
return false;



<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<div id="theParentx">
<select id="example-post-checkboxName" name="multiselect[]" aria-labelledby="dropdownMenu3" multiple="multiple" required>
<div id="theChildx" class="dropdown-menu">

<input />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default input-group-addon">Submit</button>


Add keydown event along with click to your dynamic textbox as below:

$('.dropdown-menu').on("keydown click", "#txtCategory", function (e) {

Updated Fiddle Here