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>