我已经使用data-live-search作为可搜索选项。当我单击聚焦按钮时,它应该再次聚焦选择。我用下面的代码
$("#focus").click(function() {
$(".selectpicker").focus();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<button id="focus">focus</button>
每当我按Enter键时,焦点就会被选中,但搜索选项不会显示。我已附上screenshot
输入时,请给我建议以显示带有搜索选项的正确选项
最佳答案
focus()
不起作用,因为它转为自定义的select
非本机选择选项,顺便说一下,在selectpicker
插件中有一种本机方式来执行此操作,该事件称为toggle
$("#focus").click(function() {
// toggle
$('.selectpicker').selectpicker('toggle');
// select by value
$('.selectpicker').selectpicker('val', 'Test');
$('.remove-example').selectpicker('refresh');
// change highlight
$('.dropdown-menu li').removeClass('active')
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<button id="focus">focus</button>
关于javascript - 如何聚焦自举选择器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60297296/