gpt4 book ai didi

javascript - 如何聚焦引导选择选择器

转载 作者:行者123 更新时间:2023-12-01 00:07:16 26 4
gpt4 key购买 nike

我使用 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 而不是 native 选择选项,顺便说一句,在 selectpicker< 中有一种 native 方法可以执行此操作 插件,名为 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com