Aquí está mi código 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>Aquí está mi código 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); }); })Aquí está mi violín: JSFiddle
Quiero obtener los datos de la entrada del cuadro de búsqueda en bootstrap-select . Por ejemplo, si escribo "a" en el cuadro de búsqueda, quiero que obtenga la "a" como mensaje de alerta. Leí esta guía y probé varias formas, pero no funcionó. ¿Podrías ayudarme?
Gracias por adelantado.
Dado que el valor cambiará constantemente, crearía la variable como el elemento real.
Si observa la estructura DOM, verá que el elemento div.bs-searchbox es un elemento secundario de un elemento hermano del elemento $('#myselect') .
Entonces, para obtener el elemento div.bs-searchbox , primero obtenga el padre del elemento $('#myselect') , luego use .find('.bs-searchbox > input') para buscar sus dependientes, para obtener <input> hijo del elemento div.bs-searchbox (recuerde que es el elemento input el que tiene el valor de la búsqueda, no el elemento div .bs-searchbox ).
Luego, en su detector de eventos, solo obtenga el .val() de su variable searchBoxElement .
Ver fragmento a continuación
$(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>