algolia hit-template

<div>
	<input id="resources-input" placeholder="Search for products">
</div>

<div id="type-refinement">
	
</div>


<div class="resources">
	<div id="resources"></div>
</div>
<div id="pagination"></div>

<script type="text/html" id="hit-template">
	<div class="resources_item">
		Text check
		{{title}}
	</div>
</script>


<script type="text/html" id="type-template">
  <li>{{label}}</li>
  <li>{{type}}</li>
</script>

<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
  <script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>

<script>
	var search = instantsearch({
  // Replace with your own values
  appId: 'xxxxxxxxxxxxx',
  apiKey: 'xxxxxxxxxxxx', // search only API key, no ADMIN key
  indexName: 'resources',
  urlSync: true,
  searchParameters: {
    hitsPerPage: 12
  }
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#resources-input'
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#resources',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination'
  })
);

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#type-refinement',
    attributeName: 'type',
    sortBy: ["name:asc","isRefined","count:desc"],
    templates: {
      header: 'Type'
    }
  })
);

search.start();

</script>