Better Search Block

A lightweight module that transforms the standard Drupal search block into an aesthetically pleasing search box with animated icon effects.

better_search
1,451 sites
40
drupal.org
gui theme
search theming UI animation css search block form styling user experience
Drupal 8 Drupal 9 Drupal 10

インストール

Drupal 10, 9, 8 v2.0.1
composer require 'drupal/better_search:^2.0'

概要

Better Search Blockは、Drupalのデフォルト検索ブロックの外観を向上させる軽量なテーマモジュールです。最小限の設定で、サイト管理者は標準の検索フォームを、虫眼鏡アイコンを備えたモダンでアニメーション付きの検索インターフェースに置き換えることができます。

このモジュールは、ホバーやフォーカス時に発動する4種類のアニメーションテーマを提供し、インタラクティブなユーザー体験を実現します。これらのアニメーションには、背景色のトランジション、検索フィールドの拡張、アイコンのスケーリング、スライドアイコンエフェクトが含まれます。すべてのスタイリングはJavaScript依存なしの純粋なCSSで実現されており、最適なパフォーマンスを保証します。

このモジュールは、リージョンに配置された検索ブロックと専用検索ページの検索フォームの両方でシームレスに動作します。Bootstrapテーマとの互換性があり、プレースホルダーテキスト、検索フィールドの幅、送信ボタンの表示をカスタマイズするオプションも提供しています。

Features

  • 4種類のアニメーション検索ボックステーマ：Background Fade、Expand on Hover、Expand Icon on Hover、Slide Icon on Hover
  • 検索入力フィールドに表示されるカスタマイズ可能なプレースホルダーテキスト
  • 10〜30文字の範囲で11段階から選択できる検索ボックス幅の設定
  • 検索ブロックに加えて検索ページ（/search）にもBetter Searchスタイリングを適用するオプション
  • visually-hiddenクラスを使用して送信ボタンを非表示にし、すっきりした外観を実現
  • JavaScript依存なしの純粋なCSSアニメーションによる最適なパフォーマンス
  • すべての画面解像度で鮮明に表示されるSVGベースの検索アイコン
  • 自動検出と適切なスタイリングによるBootstrapテーマ互換性
  • 古いブラウザ向けのベンダープレフィックスを含むクロスブラウザサポート
  • search_block_formとsearch_formの両方のフォームで動作

Use Cases

Enhancing site search aesthetics

A site administrator wants to improve the visual appearance of the default Drupal search block without writing custom CSS. By enabling Better Search Block and selecting the 'Expand on Hover' theme, the search field becomes an interactive element that expands when users hover over it, providing visual feedback and a modern look.

Minimalist header search

A designer needs a compact search icon in the header that expands when clicked. Using the 'Expand on Hover' theme with a smaller size setting (e.g., 10), the search field appears as just an icon initially and expands to show the full input when users interact with it.

Consistent search styling across pages

A site has both a search block in the sidebar and a search form on the /search page. By enabling 'Better Search on search pages' and 'Hide the submit button', both search interfaces receive the same animated styling for a consistent user experience throughout the site.

Bootstrap theme integration

A site using a Bootstrap-based theme wants animated search styling. Better Search Block automatically detects Bootstrap and its child themes, applying appropriate classes (using array syntax instead of Attribute objects) to ensure compatibility while maintaining the animation effects.

Accessible animated search

An organization requires accessible interfaces but still wants visual enhancements. Better Search keeps the submit button in the DOM with visually-hidden class (screen readers can still access it), while users can submit by pressing Enter, meeting accessibility requirements while providing visual polish.

Tips

  • Clear Drupal's cache after changing Better Search settings to ensure the new CSS library is loaded correctly.
  • The search icon is an SVG file located at css/images/search-icon.svg and can be replaced with a custom icon by overriding the CSS.
  • For the 'Expand on Hover' theme to work properly, ensure your theme doesn't set a fixed width on the search form container.
  • Test the selected theme with your site's color scheme - the default uses a dark background (#2b303b) which may need CSS overrides to match your design.
  • The size setting affects the HTML size attribute; actual visual width may vary based on your theme's font settings.
  • If animations don't appear, verify that your theme or other modules aren't loading conflicting CSS for the search form.

Technical Details

Admin Pages 1
Better Search settings /admin/config/search/better-search

Configure the visual appearance and behavior of the Better Search enhanced search block. This page allows administrators to select an animation theme, customize the placeholder text, set the search box width, and control whether the styling is applied to search pages.

権限 1
Administer Better Search settings

Allows users to access and modify the Better Search configuration page at /admin/config/search/better-search. Users with this permission can change animation themes, placeholder text, search box size, and search page options.

Hooks 2
hook_help

Implements hook_help() to provide module documentation on the help page. Displays information about the module's purpose and links to the project page.

hook_form_alter

Alters the search_block_form and search_form forms to inject the search icon, attach the appropriate CSS library based on the selected theme, set placeholder text, configure field size, and optionally hide the submit button.

Security Notes 3
  • The module properly sanitizes the placeholder text using Drupal's translation system with @placeholder pattern to prevent XSS.
  • Configuration changes require the 'administer Better Search settings' permission, preventing unauthorized modifications.
  • No user-submitted data is stored or processed; the module only affects presentation layer.