Filter available item based on boolean attribute on my autosearch box

Open Q&A
#1

Hi guys , Can you point what is the most straighforward way to hide/filter unavailable items based on a boolean attribute ?
Can not figure out it by myself with official docs.
Is it something I need to set on the dashboard ? the javascript client or both ?
Let me share my javascript file.


const { autocomplete, getAlgoliaResults  } = window['@algolia/autocomplete-js'];

const searchClient = algoliasearch(
  '931R1ZPBTQ',
  'de5dae88e9d0fc0588d34193d469827c'
);

autocomplete({
  container: '#autocomplete',
  placeholder: 'Search for productEs',
  getSources({ query }) {
    return [
      {
        sourceId: 'products',
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: 'posts_index',
                query,
                params: {
                  hitsPerPage: 5,
                  attributesToSnippet: ['name:10', 'description:35'],
                  snippetEllipsisText: '…',
                },
              },
            ],
          });
        },
        templates: {
            item({ item, createElement }) {
              return createElement('div', {
                dangerouslySetInnerHTML: {
                  __html: `
                 
                  <div class="row my-2 justify-content-between">
                    <div class="col-3 align-self-center text-center">
                        <a href="${item.url}">
                            <img
                            src="${item.picture}"
                            alt="${item.title}"
                            />
                        </a>
                    </div>
                    <div class="col text-center">
                      <div class="">
                        <a href="${item.url}">
                          <h5 class="add-title">
                            $${item.price} - ${item.title}  
                          </h5>
                        </a>                      
                      </div>

                      <div class="row">
                        <span class="">
                          <i class="far fa-clock"></i>&nbsp;${item.created_at_str} -
                          <i class="bi bi-geo-alt"></i>
                          ${item.city}  
                        </span>                        
                      </div>
                      <div class="row mt-1">
                        <span>
                          <i class="bi bi-folder"></i>&nbsp;
                          <a href="${app_url}/category/${item.parent_category_slug}" class="">
                           ${item.parent_category}
                          </a> -
                          <a href="${app_url}/category/${item.parent_category_slug}/${item.category_slug}" class="">
                          ${item.category}
                         </a>
                        </span>
                      </div>
                    </div>
                  </div>
                  `,
                  
                },
              });
            },
            noResults() {
              return 'No encontramos articulos con esa descripcion';
            },            
          },
      },
    ];
  },
});

Any help would be great …
Leandro.