如何获取 bootstrap-select 上搜索框输入字段的值？

Question

这是我的 html 代码：

 <select id="myselect" class="selectpicker" data-live-search="true" placeholder="please type" data-live-Search-Placeholder="search">
   <option value="111">AAAAAAAAAAA</option>
   <option value="222">bbbbbbbbbbb</option>
   <option value="333">cccccccccc</option>
</select>

这是我的 javascript 代码：

$(function(){
   var select1 = $('#myselect').selectpicker();
    //var mysearchkeyword = $('#myselect').selectpicker('search.initiated').val();
    //var mysearchkeyword = $('#myselect').selectpicker('search.input').val();
    var mysearchkeyword = $('#myselect').selectpicker('.bs-searchbox').val();

   select1.on('changed.bs.select', function (e) {
    alert(mysearchkeyword);
    
   });
})

这是我的 fiddle：JSFiddle

我想获取bootstrap-select中搜索框输入的数据。例如，如果我在搜索框中键入“a”，我希望它获得“a”作为警报消息。我阅读了 this guide 并尝试了几种方法，但都没有用。你能帮帮我吗？

提前致谢。

Answer 1

由于值会不断变化，我会创建变量作为实际元素。

如果查看 DOM 结构，您会发现 div.bs-searchbox 元素是 $('#myselect') 元素的同级元素的子元素。

因此，要获取 div.bs-searchbox 元素，首先获取 $('#myselect') 元素的父元素，然后使用 .find('.bs-searchbox > input') 搜索其依赖项，获取 <input> div.bs-searchbox 元素的子元素（请记住，具有搜索值的是 input 元素，而不是 .bs-searchbox div 元素）。

然后在您的事件侦听器上，获取 searchBoxElement 变量的 .val()。

请参阅下面的代码段

$(function() {
  var select1 = $('#myselect').selectpicker();
  //var mysearchkeyword = $('#myselect').selectpicker('search.initiated').val();
  //var mysearchkeyword = $('#myselect').selectpicker('search.input').val();
  //var mysearchkeyword = $('#myselect').selectpicker('.bs-searchbox').val();
  var searchBoxElement = $('#myselect').parent().find('.bs-searchbox > input');

  select1.on('changed.bs.select', function(e) {
    alert(searchBoxElement.val());
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.min.js"></script>

<select id="myselect" class="selectpicker" data-live-search="true" placeholder="please type" data-live-Search-Placeholder="search">
  <option value="111">AAAAAAAAAAA</option>
  <option value="222">bbbbbbbbbbb</option>
  <option value="333">cccccccccc</option>
</select>

如何获取 bootstrap-select 上搜索框输入字段的值？

How to get value of searchbox input field on bootstrap-select?

javascript

bootstrap-select

bootstrap-selectpicker