yii2中类似gridview的一系列表格的检索框，怎么不让他鼠标失去焦点的时候搜索

Question

Answer 1

我也遇到了相同的问题。继承GridView类重写 renderFilters 方法

<?php
namespace app\modules\admin\components;

use Yii;
use yii\base\InvalidConfigException;
use yii\grid\GridView;
use yii\grid\GridViewAsset;
use yii\helpers\Html;
use yii\helpers\Json;
use yii\helpers\Url;

class ZGridView extends GridView {

    public $layout = "{items}\n{summary}\n{pager}";

    public $options = ['class' => 'grid-view form-inline'];

    /**
     * Creates column objects and initializes them.
     */
    protected function initColumns() {
        if (empty($this->columns)) {
            $this->guessColumns();
        }
        foreach ($this->columns as $i => $column) {
            if (is_string($column)) {
                $column = $this->createDataColumn($column);
            } else {
                // 设置搜索默认值
                $label = '';
                if (isset($column['label'])) {
                    $label = $column['label'];
                }
                $column = Yii::createObject(array_merge([
                    'class' => $this->dataColumnClass ?: ZDataColumn::className(),
                    'grid' => $this,
                ], $column));
                if ($label != '') {
                    $column->filterInputOptions['prompt'] = $label;
                }

            }
            if (!$column->visible) {
                unset($this->columns[$i]);
                continue;
            }
            $this->columns[$i] = $column;
        }
    }

    public function renderTableHeader() {
        $cells = [];
        foreach ($this->columns as $column) {
            /* @var $column Column */
            $cells[] = $column->renderHeaderCell();
        }
        $content = Html::tag('tr', implode('', $cells), $this->headerRowOptions);
        return "<thead>\n" . $content . "\n</thead>";
    }

    public function renderItems() {

        $content = '';
        if ($this->filterPosition === self::FILTER_POS_HEADER) {
            $content = $this->renderFilters() . $content;
        } elseif ($this->filterPosition === self::FILTER_POS_BODY) {
            $content .= $this->renderFilters();
        }
        $res = parent::renderItems();
        return $content . $res;
    }

    /**
     *  重写搜索框 加前缀
     */
    public function renderFilters() {
        if ($this->filterModel !== null) {
            $cells = [];
            $inputStr = '';
            foreach ($this->columns as $key => $column) {
                $renderFilterCell = $column->renderFilterCell();
                if($renderFilterCell != false){
                    $inputStr = Html::tag('div', $column->renderFilterCell(), ['class' => 'form-group']);
                    $cells[] = $inputStr;
                }
            }
//             sd($cells);
            $cells[] = '<button type="submit" class="btn blue">搜索</button>';
            $content = Html::tag('form', implode('', $cells), $this->filterRowOptions);
            $content = Html::tag('div', $content, ['class' => 'btn-group pull-left']);
            $content = Html::tag('div', $content, ['class' => 'table-toolbar']);
            return $content;
        } else {
            return '';
        }
    }

    /**
     * Creates a [[DataColumn]] object based on a string in the format of "attribute:format:label".
     * @param string $text the column specification string
     * @return DataColumn the column instance
     * @throws InvalidConfigException if the column specification is invalid
     */
    protected function createDataColumn($text) {
        if (!preg_match('/^([^:]+)(:(\w*))?(:(.*))?$/', $text, $matches)) {
            throw new InvalidConfigException('The column must be specified in the format of "attribute", "attribute:format" or "attribute:format:label"');
        }
        $label = $this->getLabelName($text);
        return Yii::createObject([
            'class' => $this->dataColumnClass ?: ZDataColumn::className(),
            'grid' => $this,
            'filterInputOptions' => ['class' => 'form-control', 'id' => null, 'placeholder' => $label],
            'attribute' => $matches[1],
            'format' => isset($matches[3]) ? $matches[3] : 'text',
            'label' => isset($matches[5]) ? $matches[5] : null,
        ]);
    }

    public function getLabelName($attr) {
        $provider = $this->dataProvider;
        $model = new $provider->query->modelClass;
        $label = $model->getAttributeLabel($attr);
        return $label;
    }

    /**
     * Returns the options for the grid view JS widget.
     * @return array the options
     */
    protected function getClientOptions()
    {
        $filterUrl = isset($this->filterUrl) ? $this->filterUrl : Yii::$app->request->url;
        $id = $this->filterRowOptions['id'];
        $filterSelector = "#$id select, #$id button";
        if (isset($this->filterSelector)) {
            $filterSelector .= ', ' . $this->filterSelector;
        }

        return [
            'filterUrl' => Url::to($filterUrl),
            'filterSelector' => $filterSelector,
        ];
    }

    /**
     * Runs the widget.
     */
    public function run() {
        $id = $this->options['id'];
        $options = Json::htmlEncode($this->getClientOptions());
        $view = $this->getView();
        GridViewAsset::register($view);
        // $view->registerJs("jQuery('#$id').yiiGridView($options);");
        $view->registerCss(".filters>.form-group {padding-right: 10px;}");
        $view->registerCss(".pagination{ position: absolute; right: 21px; bottom: -5px; }");
        \yii\widgets\BaseListView::run();
    }

}

?>

Answer 2

很简单，去这个页面，关闭那个pjax begin 还有下面那个end即可

Answer 3

可以在页面尾部添加：

<?php
$this->registerJs(<<<JS
    $('.filters input, .filters select').change(function() {
        return false;
    })
JS
);

或者

如果你没有修改搜索框的class的话，搜索框的class应该是 form-control。可以在页面尾部添加：

<?php
$this->registerJs(<<<JS
    $('.filters .form-control').change(function() {
        return false;
    })
JS
);