cdcssg.github.io/search.html at master · cdcssg/cdcssg.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
---
layout: default
title: Search
sitemap: false
description: Cri du Chat Syndrome Support Group site search
keywords:
---

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.2.5/dist/instantsearch.min.css">
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.2.5/dist/instantsearch.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.2.5/dist/instantsearch-theme-algolia.min.css">

<div id="search-box">
  <!-- SearchBox widget will appear here -->
</div>

<div id="hits">
  <!-- Hits widget will appear here -->
</div>

<script>
  const search = instantsearch({
    appId: '{{site.algolia.application_id}}',
    apiKey: '{{site.algolia.search_api_key}}',
    indexName: '{{site.algolia.index_name}}',
    urlSync: true
  });

  // initialize SearchBox
  search.addWidget(
    instantsearch.widgets.searchBox({
      container: '#search-box',
      placeholder: 'Search',
      cssClasses: 'blah',
      reset: false,
      magnifier: false,
    })
  );

  search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      templates: {
        empty: 'No results',
        item: '<div class="card" style="margin: 1rem 0"><div class="card-body"><strong class="card-title"><a href="\{\{url\}\}">\{\{title\}\}</a></strong><p class="card-text">\{\{text\}\}</p></div></div>'
      }
    })
  );

  search.start();
</script>

<img src='https://www.algolia.com/static_assets/images/press/downloads/search-by-algolia.png' width='150rem' alt='search by Algolia' class='pull-right'/>