@docsearch/js

Basic Search Implementation

This code initializes a basic search functionality using @docsearch/js. You need to provide your Algolia API key, index name, and the selector for the input element where users will type their search queries.

const { DocSearch } = require('@docsearch/js');

const search = new DocSearch({
  apiKey: 'your-api-key',
  indexName: 'your-index-name',
  inputSelector: '#search-input',
});

search.init();

Customizing Search Results

This code demonstrates how to customize the search results by transforming the items. In this example, the titles of the search results are converted to uppercase.

const { DocSearch } = require('@docsearch/js');

const search = new DocSearch({
  apiKey: 'your-api-key',
  indexName: 'your-index-name',
  inputSelector: '#search-input',
  transformItems: (items) => {
    return items.map(item => ({
      ...item,
      title: item.title.toUpperCase(),
    }));
  }
});

search.init();

Styling the Search Interface

This code shows how to style the search interface by providing custom templates for the search items. The `templates` option allows you to define HTML templates for the search results.

const { DocSearch } = require('@docsearch/js');

const search = new DocSearch({
  apiKey: 'your-api-key',
  indexName: 'your-index-name',
  inputSelector: '#search-input',
  container: '#search-container',
  templates: {
    item: '<div class="search-item">{{title}}</div>',
  }
});

search.init();