javascript - 引导多选搜索从数据库获取值

Question

正在使用bootstrap-multiselect在我的项目中。在搜索中，我试图通过 ajax 请求获取数据库值，但它没有附加。

这是我的代码

$('#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>

在我的代码中附加 html 和 $('.multiselect-container').append(html)。但选项没有改变。

请帮我通过搜索更改值。提前致谢

Answer 1

您需要在选择框本身而不是mutliselect-container内附加新选项，然后重建您的mutliselect。

演示代码:

$('#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>