SharePoint 2013 検索ボックスの初期値を変更する

  • Article

こんにちは、SharePoint サポートの佐伯です。
今回は、検索ボックス Web パーツのカスタマイズについて投稿します。キーワードを入力する前の検索ボックスは以下のような状態です。
フォーカスを設定すると・・・

検索ボックスでは、キーワードを入力する前は上の画像のように、“検索…” という初期値が表示されます。
今回はこの初期値を変更する方法をご紹介します。

※注意
本投稿でご紹介する方法は、検索ボックス Web パーツ (SearchBoxScriptWebPart クラス) を使用した場合の編集方法になります。
サイト右上に表示される既定の検索ボックスは、検索ボックス Web パーツとは別のコンポーネントになり、標準の機能で初期値を変更することができません。この点につきましては、ご了承ください。

検索ボックスの初期値を変更する方法
検索ボックス Web パーツの検索ボックスの表示は、コントロール表示テンプレートに定義されています。この表示テンプレートを編集して、検索ボックスの初期値を変更します。
今回は、ドキュメントを対象とした検索というケースを想定して、初期値を変更しましょう。(ドキュメントを対象とした検索の設定方法については今後の投稿でご紹介する予定です)

1. [サイトの設定] – [Web デザイナー ギャラリー] – [マスター ページ] をクリックし、マスター ページ ギャラリーを開きます。
2. [Display Templates]、[Search] の順にフォルダを展開し、Control_SearchBox.html をダウンロードします。
3. ダウンロードした Control_SearchBox.html ファイルを開き、以下のように編集します。
(変更前)
prompt = Srch.Res.sb_Prompt;
(変更後)
prompt = "ドキュメントを検索...";
4. Control_SearchBox.html ファイルを保存し、マスター ページ ギャラリーの [Display Templates] – [Search] フォルダに上書きアップロードします。

以下のような表示になりました！
このように検索ボックスの初期値を変更すると、何を対象とした検索なのかが分かりやすくなりますね。

補足) 上記の手順では、SharePoint 既定の表示テンプレートを編集し、上書きアップロードする方法をご紹介しておりますが、新たに表示テンプレートを作成し、検索ボックス Web パーツで使用することも可能です。
その際は、検索ボックス Web パーツの [Web パーツの編集] より、[検索ボックスのコントロール表示テンプレート] で対象の表示テンプレートを設定します。

※既定では、”既定の検索ボックス” (Control_SearchBox) が設定されています。

また、上記のドキュメントの検索以外にも、以下のパターンが考えられます。
人の検索を行う場合、

お知らせの検索を行う場合、

画像の検索を行う場合、

ご要件に合わせて、検索ボックスのカスタマイズを行ってください。
なお、今回の投稿では検索ボックスの初期値を変更する方法についてご紹介しておりますが、検索ボックスの表示テンプレートを編集して、検索ボックスのデザインを変更することも可能です。
今回の投稿は以上です。

検索の表示のカスタマイズや設定について、過去の投稿もご参考にしていただけますと幸いです。
SharePoint 2013 検索の設定やカスタマイズに関する投稿まとめ