单击引导选择选择器的下拉菜单时关注搜索框输入答案

【问题标题】：Focus on searchbox input when clicking dropdown menu of bootstrap selectpicker单击引导选择选择器的下拉菜单时关注搜索框输入
【发布时间】：2020-01-29 02:43:32
【问题描述】：

我的问题很简单，但我似乎找不到解决办法：

我正在为我的<select> 标签使用 bootstrap selectpicker 插件
我想要的是当用户点击下拉选项时，搜索框获得焦点，而不必单击搜索框以使其被关注以启动关键字搜索（通常只是更好的用户界面），
我在网上看到应该默认打开关注搜索框，但我尝试了默认设置，但它不起作用

这是我的 JQUERY/JS 尝试手动关注搜索框文本框输入：

我试过了

$('.ingredientsList .dropdown-toggle').on('click', function (e) {
        $(this).find(".bs-searchbox input").focus();

    });

还有这个

$('select').on('changed.bs.select', function (e) {
        $(this).find(".bs-searchbox input").focus();

    });

还尝试用类名和 ID 替换 select，似乎没有什么让它专注于输入文本。我尝试替换搜索框输入的.val() 只是作为测试并且它有效。所以真的，我认为我做错的是focus(); 位，但需要大方向。

这是原始的 HTML

<select class="selectpicker ingredientsList" name="ingredientsSelection" data-size="5" 
    id="ingredientsList"  title="Search Ingredients" data-live-search="true" >
      <option value="0">Milk</option>
      <option value="1">Butter</option>
</select>

【问题讨论】：

plnkr.co/edit/SQt0hSykjjWEym0Rj8X4?p=preview

标签： javascript jquery html bootstrap-4 bootstrap-selectpicker

【解决方案1】：

也许是因为你有很多选择器，当你选择一个时，它会专注于其他人。您可以通过在here 中查看更多信息以编程方式进行操作

【讨论】：

【解决方案2】：

试试这个：

$(document).ready(function () { $('#ingredientsList').focus();});

【讨论】：