javascripthtmljquerymulti-selectbootstrap-multiselect

bootstrap multiselect search get value from database


Am using bootstrap-multiselect in my project. There in search am tying to get database value by ajax request, but it is not appending.

this is my code

$('#example-getting-started').multiselect({
    includeSelectAllOption: false,
    enableFiltering: true,
    includeFilterClearBtn: true,
    enableCaseInsensitiveFiltering: true               
});

$('.multiselect-search').on("keyup", function(e){
    var keyword = e.target.value;
    if(keyword.length > 2){
        $.ajax({
          url: "https://jsonplaceholder.typicode.com/users",
          type:"get",
          dataType:"json",
          success:function(response){
            // code for append options example
            //var data = JSON.parse(response);
            var data = response;            
            $.each(data, function(i, option){
                console.log(option)
              var html = '<button type="button" class="multiselect-option dropdown-item" title="'+option.name+'" style="display: block;"><span class="form-check"><input class="form-check-input" type="checkbox" value="cheese"><label class="form-check-label">'+option.name+'</label></span></button>';
              $('.multiselect-container').append(html)
            })
            $('.multiselect').multiselect('rebuild')
          }
        });
    }
});
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css" type="text/css">
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-example.min.css" type="text/css">
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/prettify.min.css" type="text/css">
<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/fontawesome-5.15.1-web/all.css" type="text/css">


<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
<script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js"></script>

<link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css">
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">


<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

In my code am appending html with $('.multiselect-container').append(html). But option not changing.

Please help me to change the value by search. Thanks in advance


Solution

  • You need to append new option inside your select-box itself not inside mutliselect-container and then rebuild your mutliselect.

    Demo code :

    $('#example-getting-started').multiselect({
      includeSelectAllOption: false,
      enableFiltering: true,
      includeFilterClearBtn: true,
      enableCaseInsensitiveFiltering: true
    });
    
    $('.multiselect-search').on("keyup", function(e) {
      var keyword = e.target.value;
      if (keyword.length > 2) {
        $.ajax({
          url: "https://jsonplaceholder.typicode.com/users",
          type: "get",
          dataType: "json",
          success: function(response) {
            $('#example-getting-started').empty() //clear previous options
            $.each(response, function(i, option) {
              $('#example-getting-started').append("<option value=" + option.name + ">" + option.name + "</option>") //append to select itself
            })
            $('#example-getting-started').multiselect('rebuild') //rebuild your select
            $('.multiselect-search').val(keyword) //again set search-box..value..it was lost when rebuild
            $('.multiselect-search').focus()
          }
        });
    
      }
    });
    <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css" type="text/css">
    <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-example.min.css" type="text/css">
    <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/prettify.min.css" type="text/css">
    <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/fontawesome-5.15.1-web/all.css" type="text/css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
    <script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js"></script>
    
    <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css">
    <script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <select id="example-getting-started" multiple="multiple">
      <option value="cheese">Cheese</option>
      <option value="tomatoes">Tomatoes</option>
      <option value="mozarella">Mozzarella</option>
    </select>