[Question] How to add Search function

[RyanBram]

Hi, Developers. Based on this issue, search function has been implemented. I have read the documentation, but still cannot understand about what I should do.

Is it possible for you to give me working example in script.js like in docu-starter.zip.

Some javascript code like...

  plugins: [
    docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '65360cf9a91d87cd455d2b286d0d89ee',
      indexName: 'docute',
      tags: ['english', 'zh-Hans', 'zh-Hant', 'ja'],
      url: 'https://v3.docute.org'
    }),
    evanyou(),
    disqus({
            shortname: 'wxa'
        })
  ],

.. will be really useful for me.

Thank you very much.

[benkoska]

To add a search function you need to have a plugin that handles the search. Example:

this.search = {
      handler: keyword => {
        return entries.filter(value =>
          value.title.toLowerCase().includes(keyword.toLowerCase())
        )
      }
    }
    this.search.enabled = true

where entries is a list of all pages you want to make searchable.

[zakrzk]

Had the same problem so I'll add this in case that's helpful for someone.

I used @DeveloperBen function.

---

First, you'll need to call your API to get the array with your data:

// Fetch this from your API
var SearchResult = [
  {title: 'Title', link: 'title1', label: 'Label is optional', description: 'Description is optional'},
  {title: 'Another', link: 'another'},
  {title: 'One more', link: 'one-more'},

];

Then, create a plugin object:

const searchBar = entries => {
    return {
        name: 'searchBar',
        extend(api) {
            api.enableSearch(
                {
                    handler: keyword => {
                        return entries.filter(value =>
                            value.title.toLowerCase().includes(keyword.toLowerCase()))
                    }
                }
            );
        }
    }
}

Finally, enable plugin in Docute object and pass your array:

    plugins: [
        searchBar(SearchResult)
    ],

References

api.enableSearch Plugin

[ludwigmair]

Hi, i tryed the above example to add a searchbar, but it does not work. the field is there but the search does not work

thanks for any help

cheers Ludwig