Focus on searchbox input when clicking dropdown menu of bootstrap selectpicker

Question

My problem is simple, but I can't seem to find a solution:

• I am using bootstrap selectpicker plugin for my <select> tags
• What I want is that when the user clicks on the dropdown selections, the search box gets focused on, instead of having to click on the search box for it to be focused on to initiate a keyword search (Just better UI in general),
• I read online that focusing on the searchbox should be on by default, but I tried default settings and it is not working

Here is my JQUERY/JS attempt to manually focus on the search box textbox input:

I tried this

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

    });

and this

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

    });

Also tried this replacing select with class names and IDs, nothing seem to make it focus on the input text. I tried replacing .val() of the searchbox input just as a test and it worked. So really, I think what I'm doing wrong is the focus(); bit, but need general direction.

Here is the original 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>

Answer 1

Maybe because you have many selecpicker and when you select one, it focuses to others. You may do that programmatically by looking more information in here

Answer 2

尝试这个：

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