docs(readme): Update readme
This commit is contained in:
Pixelastic
parent
1cb6964ba4
commit
1ade9cdbcf
4 changed files with 51 additions and 298 deletions
BIN
.github/demo.gif
vendored
Normal file
BIN
.github/demo.gif
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 484 KiB |
33
.github/docsearch-logo.svg
vendored
Normal file
33
.github/docsearch-logo.svg
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="476px" height="78px" viewBox="0 0 476 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>docsearch-logo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Docsearch-V3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="DocSearch_V3" transform="translate(-482.000000, -120.000000)" fill-rule="nonzero">
|
||||
<g id="Section---Hero" transform="translate(365.000000, 120.000000)">
|
||||
<g id="docsearch-logo" transform="translate(117.000000, 0.000000)">
|
||||
<path d="M36.4933333,77.2891139 L3.07416667,77.2891139 C1.3763513,77.2891139 6.2397743e-15,75.9187652 0,74.2283544 L36.5230833,74.2283544 C49.2916366,74.2900848 61.1233434,67.5648923 67.561314,56.586092 C73.9992847,45.6072916 74.0654385,32.0428244 67.7348557,21.002294 C61.404273,9.96176365 49.6387199,3.12248929 36.8701667,3.06075949 L0,3.06075949 C4.73181133e-15,1.3703487 1.3763513,-1.03507808e-16 3.07416667,0 L36.8701667,0 C47.1799191,0.0104632345 57.0627976,4.10020304 64.3426603,11.3686868 C71.622523,18.6371705 75.702425,28.4883865 75.684,38.7531646 C75.6245,60.1192405 57.9430833,77.2891139 36.4933333,77.2891139 Z" id="Shape" fill="#5468FF"></path>
|
||||
<path d="M0,69.0448101 L23.71075,69.0448101 C26.6423682,69.0550684 29.4719692,67.9739447 31.6440833,66.0136709 L0,66.0136709 L0,69.0448101 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M0,60.8005063 L36.3743333,60.8005063 C37.1081667,59.8131646 37.7924167,58.8258228 38.4270833,57.7298734 L0,57.7298734 L0,60.8005063 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M0,52.5463291 L41.02525,52.5463291 C41.4318333,51.5589873 41.79875,50.5716456 42.1160833,49.4855696 L0,49.4855696 L0,52.5463291 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M0,44.3020253 L43.3060833,44.3020253 C43.4548333,43.3146835 43.5738333,42.2681013 43.64325,41.2412658 L0,41.2412658 L0,44.3020253 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M0,36.0577215 L43.6333333,36.0577215 C43.5639167,35.0210127 43.4449167,33.9941772 43.2961667,32.9870886 L0,32.9870886 L0,36.0577215 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M0,27.8035443 L42.1160833,27.8035443 C41.79875,26.7668354 41.4318333,25.74 41.02525,24.7427848 L0,24.7427848 L0,27.8035443 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M0,19.5592405 L38.4270833,19.5592405 C37.7959036,18.5046771 37.1107515,17.4830788 36.3743333,16.498481 L0,16.498481 L0,19.5592405 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M0,8.2443038 L0,11.3149367 L31.6738333,11.3149367 C29.502744,9.35300436 26.6724708,8.27162384 23.7405,8.28379747 L0,8.2443038 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M135.679833,50.0779747 C133.857467,53.3813109 131.098201,56.077032 127.7465,57.8286076 C123.979171,59.7595077 119.784913,60.7169242 115.549,60.6129114 L98.9683333,60.6129114 L98.9683333,16.923038 L115.539083,16.923038 C119.778245,16.8128696 123.978892,17.7490595 127.766333,19.6481013 C131.117724,21.3589797 133.880042,24.0267425 135.699667,27.3098734 C137.592163,30.796513 138.545364,34.711748 138.466417,38.6741772 C138.536692,42.6506388 137.576998,46.5780839 135.679833,50.0779747 Z M124.26575,47.8860759 C126.559806,45.7073418 127.706833,42.6367089 127.706833,38.6741772 C127.706833,34.7116456 126.559806,31.6443038 124.26575,29.4721519 C121.965083,27.2868354 118.745472,26.1941772 114.606917,26.1941772 L109.589083,26.1941772 L109.589083,51.1541772 L114.606917,51.1541772 C118.752083,51.1541772 121.971694,50.0648101 124.26575,47.8860759 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M175.455583,19.1248101 C178.778997,21.0125003 181.521982,23.7674194 183.388917,27.0926582 C185.363981,30.6103542 186.369802,34.5854361 186.304417,38.6149367 C186.357881,42.6599502 185.331208,46.6465125 183.329417,50.1668354 C181.438453,53.5109093 178.668441,56.2790801 175.31675,58.1741772 C168.344929,62.004212 159.886821,62.004212 152.915,58.1741772 C149.564192,56.2812621 146.796866,53.5123487 144.91225,50.1668354 C142.904645,46.6488476 141.877561,42.6606882 141.93725,38.6149367 C141.876602,34.5784542 142.903926,30.599591 144.91225,27.0926582 C146.806618,23.7647079 149.572472,21.0109162 152.915,19.1248101 C159.911199,15.2936429 168.389968,15.2936429 175.386167,19.1248101 L175.455583,19.1248101 Z M155.899917,29.4425316 C153.857083,31.6870886 152.832361,34.744557 152.82575,38.6149367 C152.819139,42.4853165 153.843861,45.5329114 155.899917,47.7577215 C160.475574,52.286235 167.865259,52.286235 172.440917,47.7577215 C174.496972,45.5 175.525,42.4524051 175.525,38.6149367 C175.525,34.7774684 174.500278,31.7298734 172.450833,29.4721519 C167.856159,24.9616095 160.474758,24.9616095 155.880083,29.4721519 L155.899917,29.4425316 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M225.108333,20.8822785 C228.807888,23.8729765 231.326363,28.0696152 232.218583,32.7303797 L220.992917,32.7303797 C220.23117,30.8024314 218.899911,29.1499189 217.175,27.9911392 C215.363487,26.8072206 213.232616,26.2010555 211.066333,26.2534177 C208.171408,26.151896 205.393594,27.3960957 203.5495,29.6202532 C201.6455,31.8779747 200.6935,34.9058228 200.6935,38.7037975 C200.6935,42.5017722 201.6455,45.5164557 203.5495,47.7478481 C205.39548,49.9695422 208.172008,51.2131656 211.066333,51.1146835 C213.22748,51.1823181 215.358116,50.5934386 217.175,49.4263291 C218.88921,48.2774286 220.218887,46.6440734 220.992917,44.7364557 L232.2285,44.7364557 C231.327412,49.393857 228.810628,53.5876774 225.11825,56.584557 C221.462306,59.5268354 216.834528,61.0012658 211.234917,61.0078481 C207.306799,61.0934167 203.428376,60.121217 200.00925,58.1939241 C196.799336,56.3367169 194.19876,53.5931576 192.522167,50.2951899 C190.71746,46.7136362 189.812301,42.7496616 189.884333,38.7432911 C189.811087,34.7336358 190.716268,30.7661764 192.522167,27.181519 C194.19876,23.8835513 196.799336,21.1399919 200.00925,19.2827848 C203.428395,17.367541 207.302981,16.4056772 211.225,16.498481 C216.831222,16.498481 221.459,17.9597468 225.108333,20.8822785 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M267.00625,54.6789873 C265.746742,56.6887326 263.937095,58.2986652 261.790083,59.3194937 C259.180122,60.5355687 256.320749,61.1272646 253.44025,61.0473418 C248.521583,61.0473418 244.468972,59.8526582 241.282417,57.4632911 C238.100352,55.0934231 236.179436,51.4065135 236.06625,47.4516456 L247.361333,47.4516456 C247.443743,48.9216964 248.07302,50.3085152 249.1265,51.3417722 C250.181667,52.3036655 251.574181,52.8142727 253.003917,52.7635443 C254.185488,52.8313439 255.34651,52.4342049 256.23675,51.6577215 C257.030471,50.8792089 257.458747,49.8042318 257.416833,48.6956962 C257.444121,47.6622237 257.050719,46.6616423 256.326,45.9212658 C255.556923,45.1409586 254.640152,44.5201389 253.628667,44.0946835 C252.557667,43.6207595 251.06025,43.1073418 249.15625,42.3964557 C246.832355,41.631224 244.562906,40.7109104 242.363333,39.6417722 C240.553223,38.7109244 238.997831,37.3554683 237.831417,35.6924051 C236.492213,33.6707801 235.829259,31.2793484 235.937333,28.86 C235.875197,26.4642059 236.568818,24.1092735 237.920667,22.1263291 C239.30137,20.182733 241.210816,18.6721146 243.424417,17.7721519 C245.969,16.7236969 248.703542,16.2094249 251.456917,16.261519 C256.335917,16.261519 260.213333,17.4134177 263.089167,19.7172152 C265.987262,22.0657533 267.758273,25.5206486 267.968167,29.2351899 L256.484667,29.2351899 C256.347009,27.9480419 255.789713,26.7412086 254.898,25.7992405 C253.972651,24.9274498 252.729216,24.4707768 251.456917,24.535443 C250.378453,24.4989504 249.322696,24.8493344 248.481917,25.5227848 C247.683067,26.2706544 247.264317,27.3365284 247.3415,28.4255696 C247.309951,29.3971776 247.666556,30.3416121 248.333167,31.0518987 C249.063733,31.8085442 249.940863,32.4097806 250.9115,32.8192405 C251.942833,33.2734177 253.430333,33.8493671 255.374,34.5470886 C257.740146,35.3085002 260.044246,36.2492259 262.266083,37.3610127 C264.095844,38.3308959 265.669168,39.7180446 266.8575,41.4091139 C268.217114,43.4522079 268.8907,45.8720704 268.781333,48.3205063 C268.79676,50.5633392 268.181911,52.7657739 267.00625,54.6789873 Z" id="Shape" fill="#21243D"></path>
|
||||
<polygon id="Shape" fill="#21243D" points="285.262833 25.3253165 285.262833 34.4779747 300.137833 34.4779747 300.137833 42.4556962 285.262833 42.4556962 285.262833 52.1612658 301.952583 52.1612658 301.952583 60.6227848 274.691667 60.6227848 274.691667 16.923038 301.99225 16.923038 301.99225 25.3253165"></polygon>
|
||||
<path d="M335.01475,52.6450633 L318.572917,52.6450633 L315.835917,60.6129114 L304.66975,60.6129114 L320.744667,17.2389873 L332.971917,17.2389873 L349.066667,60.6129114 L337.75175,60.6129114 L335.01475,52.6450633 Z M332.287667,44.6081013 L326.823583,28.5440506 L321.3,44.6081013 L332.287667,44.6081013 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M374.85,60.6129114 L365.349833,44.1144304 L362.95,44.1144304 L362.95,60.6129114 L352.339167,60.6129114 L352.339167,16.923038 L370.466833,16.923038 C373.508993,16.8435316 376.527773,17.4723779 379.28275,18.7594937 C381.540412,19.828704 383.423335,21.5486228 384.687333,23.6962025 C385.910213,25.8753713 386.529647,28.3388933 386.48225,30.8346835 C386.570466,33.7560242 385.638202,36.6173857 383.844417,38.9308861 C381.877062,41.2568908 379.174009,42.8479748 376.178833,43.443038 L386.611167,60.6227848 L374.85,60.6129114 Z M362.95,36.9167089 L369.534667,36.9167089 C371.207011,37.0657381 372.873584,36.5750076 374.1955,35.5443038 C375.253092,34.4466552 375.79366,32.9540184 375.683,31.436962 C375.767371,29.9270053 375.217814,28.4500295 374.16575,27.3592405 C372.881752,26.2782142 371.22085,25.7459206 369.544583,25.8782278 L362.95,25.8782278 L362.95,36.9167089 Z" id="Shape" fill="#21243D"></path>
|
||||
<path d="M424.810167,20.8822785 C428.51301,23.8701397 431.032264,28.0680759 431.920417,32.7303797 L420.684833,32.7303797 C419.929851,30.793271 418.59756,29.1325854 416.866917,27.9713924 C415.055936,26.7863192 412.924694,26.1800488 410.75825,26.2336709 C407.862179,26.1339379 405.085496,27.3865779 403.251333,29.6202532 C401.347333,31.8779747 400.395333,34.9058228 400.395333,38.7037975 C400.395333,42.5017722 401.347333,45.5164557 403.251333,47.7478481 C405.092331,49.9704329 407.86646,51.2146235 410.75825,51.1146835 C412.923728,51.1718617 415.055069,50.5690076 416.866917,49.3868354 C418.583624,48.2406543 419.913992,46.606449 420.684833,44.696962 L431.920417,44.696962 C431.023346,49.3558882 428.505797,53.5509834 424.810167,56.5450633 C421.154222,59.4873418 416.526444,60.9617722 410.926833,60.9683544 C406.995369,61.0557096 403.113284,60.0834509 399.69125,58.1544304 C396.482141,56.2993186 393.884239,53.554945 392.214083,50.2556962 C390.405993,46.6753512 389.500641,42.7105345 389.57625,38.7037975 C389.499025,34.6937353 390.40442,30.7253384 392.214083,27.1420253 C393.884239,23.8427766 396.482141,21.0984029 399.69125,19.2432911 C403.114262,17.3177122 406.996288,16.3488797 410.926833,16.4392405 C416.526444,16.4787342 421.154222,17.9597468 424.810167,20.8822785 Z" id="Shape" fill="#21243D"></path>
|
||||
<polygon id="Shape" fill="#21243D" points="475.167 16.923038 475.167 60.6129114 464.48675 60.6129114 464.48675 42.3865823 447.8565 42.3865823 447.8565 60.6129114 437.245667 60.6129114 437.245667 16.923038 447.8565 16.923038 447.8565 33.8559494 464.48675 33.8559494 464.48675 16.923038"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
314
README.md
314
README.md
|
|
@ -1,309 +1,29 @@
|
|||
|
||||
[![DocSearch][1]][8]
|
||||
|
||||
The easiest way to add search to your documentation. For free.
|
||||
|
||||
Check out our [website][1] to add an outstanding search to your documentation.
|
||||
[![npm version][2]](https://npmjs.org/package/docsearch.js)
|
||||
[![build][3]](https://travis-ci.org/algolia/docsearch)
|
||||
[![coverage][4]](https://coveralls.io/github/algolia/docsearch)
|
||||
[![License][5]](./LICENSE)
|
||||
[![Downloads][6]](https://npm-stat.com/charts.html?package=docsearch.js)
|
||||
[![jsDelivr Hits][7]](https://www.jsdelivr.com/package/npm/docsearch.js)
|
||||
|
||||
[![Version][version-svg]][package-url] [![Build Status][travis-svg]][travis-url] [![Coverage Status][coveralls-svg]][coveralls-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url] [![jsDelivr Hits][jsdelivr-badge]][jsdelivr-url]
|
||||
DocSearch will crawl your documentation website, push its content to an Algolia
|
||||
index, and allow you to add a dropdown search menu for your users to find
|
||||
relevant content in no time.
|
||||
|
||||
[version-svg]: https://img.shields.io/npm/v/docsearch.js.svg?style=flat-square
|
||||
[package-url]: https://npmjs.org/package/docsearch.js
|
||||
[travis-svg]: https://img.shields.io/travis/algolia/docsearch/master.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/algolia/docsearch.svg?branch=master
|
||||
[coveralls-svg]: https://img.shields.io/coveralls/algolia/docsearch/master.svg?style=flat-square
|
||||
[coveralls-url]: https://coveralls.io/github/algolia/docsearch?branch=master
|
||||
[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
|
||||
[license-url]: LICENSE
|
||||
[downloads-image]: https://img.shields.io/npm/dm/docsearch.js.svg?style=flat-square
|
||||
[downloads-url]: http://npm-stat.com/charts.html?package=docsearch.js
|
||||
[docsearch-website]: https://community.algolia.com/docsearch/?utm_medium=social-owned&utm_source=GitHub&utm_campaign=docsearch%20repository
|
||||
[docsearch-website-docs]: https://community.algolia.com/docsearch/documentation/?utm_medium=social-owned&utm_source=GitHub&utm_campaign=docsearch%20repository
|
||||
[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/docsearch.js/badge
|
||||
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/docsearch.js
|
||||
Check out our [website][8] for a complete explanation and documentation.
|
||||
|
||||
![Bootstrap][7]
|
||||
|
||||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||||
## Table of Contents
|
||||
|
||||
- [Introduction](#introduction)
|
||||
- [Setup](#setup)
|
||||
- [Customization](#customization)
|
||||
- [Attribution](#attribution)
|
||||
- [Default styling](#default-styling)
|
||||
- [Advanced styling](#advanced-styling)
|
||||
- [Custom options](#custom-options)
|
||||
- [Autocomplete options](#autocomplete-options)
|
||||
- [Docsearch Options](#docsearch-options)
|
||||
- [Algolia options](#algolia-options)
|
||||
- [Contributions and development workflow](#contributions-and-development-workflow)
|
||||
|
||||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||||
|
||||
<!-- START documentation -->
|
||||
|
||||
## Introduction
|
||||
|
||||
We're scratching our own itch here. As developers, we spend a lot of time
|
||||
reading documentation, and it isn't always easy to find the information we need.
|
||||
|
||||
Not blaming anyone here. Building a good search for a documentation is a complex
|
||||
challenge. We happen to have a lot of experience doing that, and we want to
|
||||
share it with the world. For free.
|
||||
|
||||
Just submit the form on the [website][16] and we'll get back to you with what
|
||||
you need to integrate your new search into your website.
|
||||
|
||||
1. We'll crawl your documentation pages,
|
||||
2. We'll configure your search experience,
|
||||
3. You'll need to add a bit of JavaScript and CSS code to your website.
|
||||
|
||||
If you prefer to DIY, you can run the [scraper][28] in your own infra.
|
||||
|
||||
**Update** You can check [the DocSearch dedicated documentation website][29]
|
||||
|
||||
## Setup
|
||||
|
||||
Once we've crawled your documentation website we'll send you the credentials you
|
||||
need to add the following code snippet to your website:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also install docsearch via `npm`:
|
||||
|
||||
```sh
|
||||
npm install --save docsearch.js
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Attribution
|
||||
|
||||
We're happy to provide DocSearch free of charge for your site, and you're
|
||||
welcome to customise that experience in a way that works for you; all we ask is
|
||||
that Algolia be attributed within the search context. For example, in the
|
||||
default implementation, we place a small "Search by Algolia" logo in the
|
||||
corner. If you prefer to roll your own UX, you'll need to make sure that this
|
||||
logo is included in your implementation as well.
|
||||
|
||||
### Default styling
|
||||
|
||||
The default colorscheme is white and gray:
|
||||
|
||||
![Default colorscheme][17]
|
||||
|
||||
To update the colors to suit your website, you just need to override a few
|
||||
colors. Here is an example of a CSS file that you can use as a basis to
|
||||
set white and purple colors.
|
||||
|
||||
```css
|
||||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #3A3DD1;
|
||||
}
|
||||
/* Main category headers */
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
background-color: #4B54DE;
|
||||
}
|
||||
/* Highlighted search terms */
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #3A33D1;
|
||||
}
|
||||
/* Highlighted search terms in the main category headers */
|
||||
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
|
||||
background-color: #4D47D5;
|
||||
}
|
||||
/* Currently selected suggestion */
|
||||
.aa-cursor .algolia-docsearch-suggestion--content {
|
||||
color: #272296;
|
||||
}
|
||||
.aa-cursor .algolia-docsearch-suggestion {
|
||||
background: #EBEBFB;
|
||||
}
|
||||
|
||||
/* For bigger screens, when displaying results in two columns */
|
||||
@media (min-width: 768px) {
|
||||
/* Bottom border of each suggestion */
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #7671df;
|
||||
}
|
||||
/* Left column, with secondary category header */
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
border-right-color: #7671df;
|
||||
background-color: #F2F2FF;
|
||||
color: #4E4726;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Advanced styling
|
||||
|
||||
If you want to do heavy changes to the way results are displayed, you might find
|
||||
it easier to directly edit the `scss` files in this repository.
|
||||
|
||||
[`_variables.scss`][18]
|
||||
contains all the color, breakpoints and size definitions while
|
||||
[`main.scss`][19]
|
||||
holds the structure of the display.
|
||||
|
||||
You can regenerate the whole final `css` file from those `scss` files by running
|
||||
`npm run build:css`. The resulting files will be found in `./dist/cdn/`.
|
||||
|
||||
All you have to do now is change the `link` tag that was loading the default
|
||||
styling from our CDN, to one that is loading your newly compiled file.
|
||||
[![Bootstrap demo][9]][8]
|
||||
|
||||
|
||||
## Custom options
|
||||
|
||||
DocSearch is a wrapper around the [autocomplete.js][20] library that gets its
|
||||
results from the Algolia API. As such, you can use any options provided by
|
||||
[autocomplete.js][21] and by the Algolia API.
|
||||
|
||||
### Autocomplete options
|
||||
|
||||
You can pass any options to the underlying `autocomplete` instance through
|
||||
the`autocompleteOptions` parameter. You will find all `autocomplete` options in
|
||||
its [own documentation][22].
|
||||
|
||||
You can also listen to `autocomplete` events through the `.autocomplete`
|
||||
property of the `docsearch` instance.
|
||||
|
||||
```javascript
|
||||
var search = docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
|
||||
debug: true,
|
||||
autocompleteOptions: {
|
||||
// See https://github.com/algolia/autocomplete.js#options
|
||||
// For full list of options
|
||||
}
|
||||
});
|
||||
|
||||
// See https://github.com/algolia/autocomplete.js#custom-events
|
||||
// For full list of events
|
||||
search.autocomplete.on('autocomplete:opened', function(e) {
|
||||
// Do something when the dropdown menu is opened
|
||||
});
|
||||
```
|
||||
|
||||
### Docsearch Options
|
||||
|
||||
|
||||
#### handleSelected
|
||||
|
||||
We already bind the autocomplete:selected event inside the docsearch.
|
||||
If you want to replace the default behavior you can pass the `handleSelected` option.
|
||||
|
||||
```javascript
|
||||
var search = docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### queryHook
|
||||
|
||||
If you want modify the query before it is send to Algolia you can pass the `queryHook` option.
|
||||
|
||||
```javascript
|
||||
var search = docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
|
||||
queryHook: function (query) {
|
||||
return query + "_modified";
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### transformData
|
||||
|
||||
If you want to modify the hits before displaying them you can make use of the
|
||||
`transformData` option
|
||||
|
||||
```
|
||||
var search = docsearch({
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
|
||||
transformData: function (hits) {
|
||||
// modify hits
|
||||
return hits;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Algolia options
|
||||
|
||||
You can also pass any specific option to the Algolia API to change the way
|
||||
records are returned. You can pass any options to the Algolia API through
|
||||
the `algoliaOptions` parameter.
|
||||
|
||||
```javascript
|
||||
docsearch({
|
||||
appId: '<APP_ID>', // if you are running the crawler yourself
|
||||
apiKey: '<API_KEY>',
|
||||
indexName: '<INDEX_NAME>',
|
||||
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
|
||||
algoliaOptions: {
|
||||
hitsPerPage: 10
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
You will find all Algolia API options in its [own documentation][23].
|
||||
|
||||
<!-- END documentation -->
|
||||
|
||||
## Contributions and development workflow
|
||||
|
||||
See [CONTRIBUTING](./CONTRIBUTING.md)
|
||||
|
||||
<!-- START links -->
|
||||
|
||||
[1]: https://community.algolia.com/docsearch/
|
||||
[1]: ./.github/docsearch-logo.svg
|
||||
[2]: https://img.shields.io/npm/v/docsearch.js.svg?style=flat-square
|
||||
[3]: https://img.shields.io/travis/algolia/docsearch/master.svg?style=flat-square
|
||||
[4]: https://img.shields.io/coveralls/algolia/docsearch/master.svg?style=flat-square
|
||||
[5]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
|
||||
[5]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
|
||||
[6]: https://img.shields.io/npm/dm/docsearch.js.svg?style=flat-square
|
||||
[7]: ./docs/source/assets/images/bootstrap-docsearch.gif
|
||||
[8]: #introduction
|
||||
[9]: #setup
|
||||
[10]: #customization
|
||||
[11]: #development-workflow
|
||||
[12]: #local-example
|
||||
[13]: #local-build
|
||||
[14]: #documentation-website
|
||||
[15]: #macos
|
||||
[16]: https://community.algolia.com/docsearch/
|
||||
[17]: https://community.algolia.com/docsearch/assets/images/default-colorscheme.png
|
||||
[18]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss
|
||||
[19]: https://github.com/algolia/docsearch/blob/master/src/styles/main.scss
|
||||
[20]: https://github.com/algolia/autocomplete.js
|
||||
[21]: https://github.com/algolia/autocomplete.js
|
||||
[22]: https://github.com/algolia/autocomplete.js#options
|
||||
[23]: https://www.algolia.com/doc/api-reference/api-parameters/
|
||||
[24]: https://nodejs.org/en/
|
||||
[25]: https://jekyllrb.com/
|
||||
[26]: https://www.ruby-lang.org/en/
|
||||
[27]: http://bundler.io/
|
||||
[28]: https://github.com/algolia/docsearch-scraper
|
||||
[29]: https://community.algolia.com/docsearch/documentation/docsearch/introduction/
|
||||
|
||||
<!-- END links -->
|
||||
[7]: https://data.jsdelivr.com/v1/package/npm/docsearch.js/badge
|
||||
[8]: https://community.algolia.com/docsearch/
|
||||
[9]: ./.github/demo.gif
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"site": {
|
||||
"project": "DocSearch",
|
||||
"title": "Algolia DocSearch: Search made for documentation",
|
||||
"title": "DocSearch: Search made for documentation",
|
||||
"description": "The easiest way to add search to your documentation",
|
||||
"url": "https://community.algolia.com/docsearch",
|
||||
"repo": "https://github.com/algolia/docsearch"
|
||||
|
|
|
|||
Loading…
Reference in a new issue