Help us understand the problem. What is going on with this article?

Confluenceのクイックサーチの動作を少し調整する

More than 5 years have passed since last update.

やりたいこと / 理由

Confluenceの検索画面や検索フォームから検索をする場合。
指定したいキーワードを半角スペースで区切って入力すると、(なぜか)『AND』検索ではなく 『OR』検索 としてサーバサイドで処理されてしまいます。

残念ながら、この動作は、エンドユーザにとって直感的ではありません...。
『キーワードを複数入力したら、検索結果が絞り込まれる』ことを期待しているのに、逆に『検索結果が増える』という動作になってしまいます。

そこで、とにかくクイックサーチだけでも、もうちょっと直感的に操作できないかと、フロントを調整してみました。

調整項目

変更すること / クイックサーチEnter時の挙動

  • クイックサーチのフォーム上に、複数キーワードをスペース区切りで入れてEnterしたら、サーバに送信する際に実際に送信するパラメータを調整する。(JavaScriptを利用)
  • 半角スペースを" AND "に置き換え、文字列を連結させてる。
  • サーバサイドには"AND検索" になるようなリクエストを送信するようにする。

変更しないこと

  • クイックサーチの見た目に変更は加えない。
  • Confluenceのサーバサイドの変更は行わない。(ソースコードの修正なども行わない)
  • 検索時のパラメータの条件も調整を行わない。

検索機能は、画面上のUIだけではなく、APIなどでももちろん利用しているので、そこには手を出しません。
あくまでも、送信時に『AND検索』になるように、サーバに投げるパラメータをJavaScriptで調整してあげる、という動作になります。

調整方法

Confluenceでは、管理画面 → カスタムHTMLという場所で、追加のHTMLを加えたり、JavaScriptで要素を加えたりできます。
こちらを利用して、クイックサーチフォーム(#quick-search-query)の挙動を調整します。
だいぶ荒いコードですが、こんな感じ。

JavaScript
<script>
AJS.toInit(function(){

  // TODO:デフォルトのフォームに、AND/OR切り替えのボタンかプルダウンあるといいかも
  //      デフォルト動作で検索したい場合があるので。

  // quick searchでEnterされた時のみの動作
  AJS.$( '#quick-search-query' ).keypress( function ( e ) {
    if ( e.which == 13 ) {

      var queryString = AJS.$('#quick-search-query').val();

      // 全角スペースは無理矢理半角に変換
      queryString = queryString.replace(/ /g," ");
      if (queryString.indexOf(" ")!=-1) {
        var array = queryString.split(' ');

        // ダブルクォートで囲むと、その文字列を分かち書きしないで検索。
        AJS.$('#quick-search-query').val(array.map(function(p){ return '"' + p + '"'; }).join(' AND '));

      } else {
        AJS.$('#quick-search-query').val('"' + queryString + '"');
      }
        return true;
      }
  });
});
</script>

結果

上記の結果、明示的に”AND検索" という条件を付けて、検索を実施となります。
サーバ側から返って来た結果画面の上部には、”キーワード1" AND "キーワード2" といったフォームが表示されます。

※ここから先は、とくに変更を加えません。とにかく『ANDで繋げれば、AND検索になるのね』ということが、その後利用する側に判ってもらえればいいかな...という感じです。

akiko-pusu
コツコツと学習しながらのメモを書いています。高度なものは少ないのですが、「なぜ?」「なにがきっかけで?」「この記事はなに?」といったことに留意して書き留めています。ご興味を持っていただけたら嬉しいです!
https://daily-postit.hatenablog.com
infra-workshop
インフラ技術を勉強したい人たちのためのオンライン勉強会です
https://wp.infra-workshop.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away