How to use apisearch-ui - 6 common examples

import apisearchUI from "apisearch-ui";

let integrationsUI = apisearchUI.create({
    app_id: '9c078fa1a748',
    index_id: 'e742fbfbac24',
    token: 'daf93c2b-40bc-49f2-870e-f8f62ea524ad',
    options: {
        endpoint: 'https://apisearch.global.ssl.fastly.net',
        override_queries: true
    }
});

integrationsUI.addWidgets(
    integrationsUI.widgets.searchInput({
        target: '.as-integrationDemo__searchBox',
        template: {
            clearSearch: '<i aria-hidden="true" class="fa fa-times-circle"></i>'
        }
    }),

`;

const authorsFilterItemTemplate = `
    <li class="{{#isActive}}as-multipleFilter__item--active{{/isActive}}">
        <span class="as-multipleFilter__itemContent">
            {{#values.img}}<img src="{{values.img}}" class="as-multipleFilter__itemImage">{{/values.img}}
            {{^values.img}}<img src="http://apisearch.io/assets/media/no-cover.jpg" class="as-multipleFilter__itemImage">{{/values.img}}
            <span class="as-multipleFilter__itemText">{{values.name}}</span>
        </span>
    </li>
`;

/**
 * Apisearch UI
 */
export const mainDemo = apisearchUI.create({
    app_id: '9c078fa1a748',
    index_id: 'e742fbfbac24',
    token: 'daf93c2b-40bc-49f2-870e-f8f62ea524ad',
    options: {
        endpoint: 'https://apisearch.global.ssl.fastly.net',
        override_queries: true
    }
});

mainDemo.attach('render', function() {
    document.querySelector('.as-mainDemo__loader').classList.add('hide');
});

const {
    searchInput,
    result,

import apisearchUI from "apisearch-ui";

let faqsUI = apisearchUI.create({
    app_id: '4186e76c',
    index_id: '0d2ca7b4',
    token: 'e3aee575-2b0a-4a95-b0ce-88fa316c4eff',
    options: {
        endpoint: 'https://apisearch.global.ssl.fastly.net'
    }
});

faqsUI.addWidgets(
    faqsUI.widgets.searchInput({
        target: '#apisearchFaqsSearchInput',
        autofocus: true
    }),
    faqsUI.widgets.multipleFilter({
        target: '.c-faqs__topicsFilter',
        name: 'topic',

import apisearchUI from "apisearch-ui";

let homeUI = apisearchUI.create({
    app_id: '9c078fa1a748',
    index_id: 'e742fbfbac24',
    token: 'daf93c2b-40bc-49f2-870e-f8f62ea524ad',
    options: {
        endpoint: 'https://apisearch.global.ssl.fastly.net',
        override_queries: true
    }
});

homeUI.addWidgets(
    homeUI.widgets.searchInput({
        target: '.as-homeDemo__searchBox',
        autofocus: true,
        template: {
            clearSearch: '<i aria-hidden="true" class="fa fa-times-circle"></i>'
        }

`;

const authorsFilterItemTemplate = `
    <li class="{{#isActive}}as-multipleFilter__item--active{{/isActive}}">
        <span class="as-multipleFilter__itemContent">
            {{#values.img}}<img src="{{values.img}}" class="as-multipleFilter__itemImage">{{/values.img}}
            {{^values.img}}<img src="https://raw.githubusercontent.com/apisearch-io/apisearch.io/master/assets/media/no-cover.jpg" class="as-multipleFilter__itemImage">{{/values.img}}
            <span class="as-multipleFilter__itemText">{{values.name}}</span>
        </span>
    </li>
`;

/**
 * Apisearch UI
 */
let filtersDemo = apisearchUI.create({
    app_id: '9c078fa1a748',
    index_id: 'e742fbfbac24',
    token: 'daf93c2b-40bc-49f2-870e-f8f62ea524ad',
    options: {
        endpoint: 'https://apisearch.global.ssl.fastly.net'
    }
});

const {
    multipleFilter,
    result
} = filtersDemo.widgets;

filtersDemo.addWidgets(
    multipleFilter({
        target: '.as-filtersDemo__authorsFilter',

constructor() {
        this.trainCounter = 0;
        this.albumsArray = albumsArray;
        this.api = apisearch(credentials);
        this.ui = apisearchUI(credentials);
    }