jQuery 多选过滤器小部件 - 过滤多个元素中的文本框焦点问题

Question

我在同一模式中使用各种 jQuery 多选小部件。像往常一样，它们都有一个文本框来过滤显示的选项，但我无法通过单击它们来关注它们。

在寻找解决方案后，我从 user2457092 找到了这个问题，在那里我找到了我的问题的部分解决方案：

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

此代码解决了我的问题，但仅适用于模态上的第一个多选。所以现在我不知道如何让 $("input[type='search']:first").focus(); 行适用于每个小部件。

这是我的代码：

<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

终于找到解决办法了！我不认为它是最好的，但是直到有人（包括我在内）找到更好的解决方案之前，我 post 这样做是为了帮助任何可能感兴趣的人：

我的解决方案是在 makeMultiselect() 函数的末尾添加一个 click&focus 事件：

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

jQuery 多选过滤器小部件 - 过滤多个元素中的文本框焦点问题

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

jquery

modal-dialog

filter

jquery-multiselect