jQuery multiselect filter widget - filter text box focus issue in multiple elements

Question

I'm using various jQuery multiselect widgets in the same modal. All of them have a text box to filter the options shown, as usual, but I was not able to focus on them by clicking on them.

After looking for a folution I found this question from user2457092 where I found a partial solution to my problem:

$("#MyStatusWidget").multiselect({
  open: function () {
    $("input[type='search']:first").focus();                   
  }
});

This code solved my problem but only for the first of the multiselects I have on the modal. So now I don't know how to make the $("input[type='search']:first").focus(); line to work for every one of the widgets.

Here is my code:

<div class="form-group">
    <div class="col-sm-4">
        <?php   
            echo $form->dropDownList($model,'Id', CHtml::listData($model1,'Id','Name'),array(
                'class'     => 'col-sm-2 multiple_select multiple_select_filter_single',
                'options'   => null,                  
            ));  
        ?>
    </div>
    <div class="col-sm-4" >
        <?php   
            echo $form->dropDownList($model,'Id', CHtml::listData($model2,'Id','Name'),array(
                'class'     => 'col-sm-2 multiple_select multiple_select_filter_single',
                'options'   => null,
            ));  
        ?>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-4">
        <?php 
            echo $form->dropDownList($model,'Id', CHtml::listData($model3,'Id','Name'),array(
                'class'     => 'col-sm-2 multiple_select multiple_select_filter_single',
                'options'   => null,
            ));
        ?>
        </div>
    </div>
    <div class="col-sm-4">
        <?php         
            echo $form->dropDownList($model,'Id', CHtml::listData($model3,'Id','Nombre'),array(
                'multiple'  => 'multiple',
                'class'     => 'col-sm-2 multiple_select multiple_select_filter',
                'options'   => null,
            ));  
        ?>
    </div>
</div>

javascript:

function makeMultiselect(){
     $("#modal .multiple_select_filter_single").multiselect({
        multiple:       false,
        selectedList:   1,
        open: function () {
            $("input[type='search']:first").focus();
        },
        beforeopen: function(){ $(this).multiselect("widget").width("450px"); },    
        click: function(e){
            if( $(this).multiselect("widget").find("input:checked").length > 1 ){
                return false;
            }
        }
    }).multiselectfilter({
        label:        "Filtro:",
        placeholder:  "",
        autoReset:    false
    });

     $("#modal .multiple_select_filter").multiselect({
        multiple:       true,
        selectedList:   1,
        beforeopen: function(){ $(this).multiselect("widget").width("450px"); },
        open: function () {
            $("input[type='search']:first").focus();
        }
    }).multiselectfilter({
          label:        "Filtro:",
          placeholder:  "",
          autoReset:    false
    });

Answer 1

Finally I found a solution! I do not think it is the best one, but until someone (me included) finds a better solution I post this in order to help anyone could be interested:

My solution consists in adding a click&focus event at the end of the makeMultiselect() function:

$(".ui-multiselect-filter input").on( "click",  function() {
   $(this).focus();
});