Add a details component with search query tips (#293)

Provide some query examples highlighting some of the supported syntax,
and link to the full documentation in Datahub.

This should help mitigate the sometimes unintuitive default behaviour of
requiring that ALL search terms match.

This behaviour is how Datahub have configured search, and to change it
we would have to customise the Elasticsearch query.

Author: MatMoore

templates/search.html

@@ -21,6 +21,22 @@ <h1 class="govuk-heading-l">{{h1_value}}</h1>
           </div>
         </div>
       </form>
+      <details class="govuk-details">
+        <summary class="govuk-details__summary">
+          <span class="govuk-details__summary-text">
+            Search query tips
+          </span>
+        </summary>
+        <div class="govuk-details__text">
+          <ul class="govuk-list govuk-list--bullet">
+            <li><p>Use multiple words to narrow down your search.</p><p>For example: <strong>prisons probation</strong> matches data mentioning "prisons" AND "probation".</p></li>
+            <li><p>Separate words with a pipe to broaden your search.</p><p>For example: <strong>prisons | probation</strong> matches data mentioning "prisons" OR "probation".</p></li>
+            <li><p>Quote phrases to require an exact match.</p><p>For example: <strong>"case management"</strong> matches the exact phrase "case management" but not either word on its own.</p></li>
+            <li><p>Use a minus sign to exclude words.</p><p>For example: <strong>courts -magistrates</strong> excludes any results that mention "magistrates".</p></li>
+          </ul>
+          <p><a href="https://datahubproject.io/docs/how/search/#advanced-queries">More search query examples</a></p>
+        </div>
+      </details>
     </div>
   </div>
   <div class="govuk-grid-row">