how to add searchable dropdown using javascript

Question

So I have this code that adds the the item from the drop-down to the text areas, As the drop-down contain multiple checklist, I was hoping someone could show me how to modify the code so it creates a searchable drop-down. even i looked to this answer Searchable select option and added select2 but nothing happens

<head>
<title>Jquery multiple select with checkboxes using bootstrap-multiselect.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
</head>
<body>
    <!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> -->

    <hr />
    <strong>Columns :</strong>
    <select id = "multichecks" multiple = "multiple" onclick = "test();" ></select>

    <input type="text" id ="textbox"/>
    <hr />
    <script type="text/javascript">
      var options =
      [
        {
          "text"  : "Option 1",
          "value" : "Value 1"
        },
        {
          "text"  : "Option 2",
          "value" : "Value 2"
        },
        {
          "text"  : "Option 3",
          "value" : "Value 3"
        },
      ];
      var selectBox = document.getElementById('multichecks');

      for(var i = 0, l = options.length; i < l; i++){
        var option = options[i];
        selectBox.options.add( new Option(option.text, option.value, option.selected) );
      }
      $(document).ready(function() {
          $('#multichecks').select2();
          $('#multichecks').multiselect({
            onChange: function test(){
            document.getElementById('textbox').value = $('#multichecks').val().join(',')               
            }
          });
      });
    </script>

score 1 · Answer 1 · answered Dec 06 '19 at 18:13

There is enableFiltering: true in bootstrap-multiselect.

I found in documentation(http://davidstutz.de/bootstrap-multiselect/#configuration-options-filterBehavior) this code

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            enableFiltering: true,
            includeSelectAllOption: true
        });
    });
</script>

If this is the plugin and version you use.

score 1 · Accepted Answer · answered Dec 06 '19 at 18:18

    $(document).ready(function() { 
    $('#multichecks').select2(); 
    $('#multichecks').multiselect({ 
    enableFiltering: true,
 enableCaseInsensitiveFiltering: true,
 filterPlaceholder: 'Search for something...',
    onChange: function test(){ 
    document.getElementById('textbox').value = $('#multichecks').val().join(',') 
    } 
    }); 
    });

You just have to add enableFiltering:true and enablecaseInsensitiveFiltering:true along with filterPlaceholder, multiselect provide this functionality.

Thanks @Hiren as first it shows None Selected how can it to other ENTER — Parth Tiwari, Dec 06 '19 at 18:41

how to add searchable dropdown using javascript

2 Answers2