空欄検索のときダイアログを表示する方法

はじめに

WordPressの検索フォームでは、キーワードが未入力のまま送信されると、全ての投稿が表示されてしまいます。

そのため、ユーザーに入力を促すために、送信前に入力チェックを行い、未入力時にはアラートを表示するようにします。

この記事では、この方法について説明します。

空欄検索の結果を0件として表示する方法

「WordPressで空の検索結果を表示しない方法」を解説。検索キーワードが空の場合に検索結果を0件にする方法や、SQLクエリを利用した別の実装方法、検索結果が0件のときにパターンを使ってオリジナルページを表示する方法を分かりやすく紹介します。

chuya.s239.xrea.com

完成イメージ

実装手順

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // 検索フォームの送信の場合
  $('form.search-box').on('submit', function (e) {
    const input = $(this).find('input[name="s"]');
    
    // 何も入力されていない場合
    if (input.length && $.trim(input.val()) === '') {
      e.preventDefault();
      alert('検索キーワードを入力してください。');
    }
  });
});

さいごに

今回紹介した方法を使えば、検索フォームにキーワードが未入力の場合でも送信を防ぎ、ユーザーにアラートで明確に入力を促すことができます。
とてもシンプルながら、ユーザー体験の向上に役立つカスタマイズです。