id = 'grid-quick-search-'.$name; $this->queryName = $name; return $this; } /** * @return string */ public function queryName() { return $this->queryName; } /** * @param int $width * * @return $this */ public function width(int $width) { $this->width = $width; return $this; } /** * Set placeholder. * * @param string $text * * @return $this */ public function placeholder(?string $text = '') { $this->placeholder = $text; return $this; } /** * @return string */ public function value() { return trim(request($this->queryName)); } /** * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View */ public function render() { $request = request(); $query = $request->query(); $this->setupScript(); Arr::forget($query, [ $this->queryName, $this->parent->model()->getPageName(), '_pjax', ]); $vars = [ 'action' => $request->url().'?'.http_build_query($query), 'key' => $this->queryName, 'value' => $this->value(), 'placeholder' => $this->placeholder ?: trans('admin.search'), 'width' => $this->width, 'id' => $this->id, ]; return view($this->view, $vars); } protected function setupScript() { $script = <<<'JS' (function () { var show = function () { var t = $(this), clear = t.parent().find('.quick-search-clear'); if (t.val()) { clear.css({color: '#333'}); } else { clear.css({color: '#fff'}); } return false; }; var request = LA.debounce(function (input) { $(input).parents('form').submit() }, 500); var $input = $('input.quick-search-input'); $input.on('focus', show).on('keyup', function () { show.apply(this); request(this); }); var val = $input.val(); val !== '' && $input.val('').focus().val(val); $('.quick-search-clear').click(function () { $(this).parent().find('.quick-search-input').val(''); $(this).closest('form').submit(); }); })() JS; Admin::script($script); } }