JSFiddle - React, Tailwind, and code Playground

by Jan Petr

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/instantsearch.js/1.8.14/instantsearch.min.js"></script>
<h1>
1.8.14 version of IS
</h1>

<br />

<div>
  <input type="text" id="search-box" />
</div>
<br />

<div id="current-refinements">
</div>

</div>

<br />

<div id="ais-availability"></div>
<br /><br />
<div id="hits-container"></div>

JavaScript

var search = instantsearch({
  appId: 'Y0GJQYP2P4',
  apiKey: '0857228f7871c2e81c6e86135a14ddbd',
  indexName: 'is_toggle_bug'
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search...'
  })
);

search.addWidget(
  instantsearch.widgets.currentRefinedValues({
    container: '#current-refinements'
  })
);

search.addWidget(    
  instantsearch.widgets.toggle({        
    container: '#ais-availability',
    attributeName: 'stock_availability',
    label: 'On Stock',
    values: {            
      on: -2        
    },
    templates: {            
      header: 'Stock Availability'        
    }    
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits-container',
    templates: {
      item: '<strong>{{title}}</strong> - Stock availability: {{stock_availability}}'
    }
  })
);

search.start();