Get started with docsearch-css CDN

MIT licensed

Docsearch-CSS is a lightweight CSS library for integrating Algolias documentation search into websites.

Tags:
  • doc
  • search

Stable version

Copied!

How to start using docsearch-css CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Documentation Search" />
  <link rel="stylesheet" href="https://cdn.cdnhub.io/docsearch-css/3.6.0/styles.css" />
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/alpine.min.js" defer></script>
  <script src="https://cdn.cdnhub.io/docsearch-js/3.6.0/docsearch.min.js" defer></script>
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('docsearchData', () => ({
        init() {
          this.$refs.search.focus();
          this.search = new AlgoliaSearch('myIndexName', {
            apiKey: 'YOUR_API_KEY',
            indexName: 'YOUR_INDEX_NAME',
          });
          this.search.addListener('result', () => this.results = this.search.state.hits);
          this.search.addListener('query', (query) => this.query = query);
        },
      }));
    });
  </script>
</head>
<body>
  <div x-data="docsearchData()" class="docsearch">
    <input type="search" ref="search" placeholder="Search documentation" />
    <button type="submit">Search</button>
    <ul>
      <template x-if="results.length > 0">
        <template x-for="result in results">
          <li>
            <a :href="result.url">@{{ result.title }}</a>
          </li>
        </template>
      </template>
    </ul>
  </div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions