createRecentSearchesPlugin
The createRecentSearchesPlugin
plugin lets you implement your own storage. To connect with the user’s local storage, check createLocalStorageRecentSearchesPlugin
.
Installation
First, you need to install the plugin.
1
2
3
yarn add @algolia/autocomplete-plugin-recent-searches
# or
npm install @algolia/autocomplete-plugin-recent-searches
Then import it in your project:
1
import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
If you don’t use a package manager, you can use the HTML script
element:
1
2
3
4
5
6
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches@1.17.4/dist/umd/index.production.js" integrity="sha256-F/8902zLQMljfZdskooECqT8prdW1I4vhPaOTH7ePcU=" crossorigin="anonymous"></script>
<script>
const { createRecentSearchesPlugin } = window[
'@algolia/autocomplete-plugin-recent-searches'
];
</script>
Example
This example uses the plugin within autocomplete-js
. You’re in charge of implementing the storage to fetch and save recent searches.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { autocomplete } from '@algolia/autocomplete-js';
import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
const recentSearchesPlugin = createRecentSearchesPlugin({
// Implement your own storage
storage: {
getAll() {},
onAdd() {},
onRemove() {},
},
});
autocomplete({
container: '#autocomplete',
openOnFocus: true,
plugins: [recentSearchesPlugin],
});
For example, you can plug it to a MongoDB database using mongoose.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import mongoose from 'mongoose';
import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
import { search } from '@algolia/autocomplete-plugin-recent-searches/usecases/localStorage';
mongoose.connect('mongodb://localhost:27017/myapp', { useNewUrlParser: true });
const schema = new mongoose.Schema({
objectID: String,
query: String,
category: {
type: String,
default: undefined,
},
});
const RecentSearchesItem = mongoose.model('RecentSearchesItem', schema);
const recentSearchesPlugin = createRecentSearchesPlugin({
storage: {
async getAll(query) {
const items = await RecentSearchesItem.find({});
return search({ query, items, limit: 5 });
},
onAdd(item) {
RecentSearchesItem.create(item);
},
onRemove(objectID) {
RecentSearchesItem.deleteOne({ objectID });
},
},
});
You can combine this plugin with the Query Suggestions plugin to populate the empty screen with recent and popular queries.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import { autocomplete } from '@algolia/autocomplete-js';
import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
);
const recentSearchesPlugin = createRecentSearchesPlugin({
// Implement your own storage
storage: {
getAll() {},
onAdd() {},
onRemove() {},
},
});
const querySuggestionsPlugin = createQuerySuggestionsPlugin({
searchClient,
indexName: 'instant_search_demo_query_suggestions',
getSearchParams() {
return recentSearches.data.getAlgoliaSearchParams();
},
});
autocomplete({
container: '#autocomplete',
openOnFocus: true,
plugins: [recentSearchesPlugin, querySuggestionsPlugin],
});
Parameters
storage
|
type: RecentSearchesStorage
Required
The storage to fetch from and save recent searches into. |
||||
Copy
|
|||||
transformSource
|
type: (params: { source: AutocompleteSource, state: AutocompleteState, onRemove: () => void, onTapAhead: () => void })
This function takes the original source as a parameter and returns a modified version of that source. For example: Change Autocomplete state Usually, when a link in the Autocomplete menu is selected, the menu closes.
However, to keep the menu visible after a selection is made, use
Copy
Create links Turns Query Suggestions into clickable Google search links:
Copy
|
Returns
data
getAlgoliaSearchParams
|
type: SearchParameters => SearchParameters
Optimized Algolia search parameters. This is useful when using the plugin along with the Query Suggestions plugin. This function enhances the provided search parameters by:
|
addItem
|
type: (item: TItem) => void
A function that adds an item to the recent searches storage. |
removeItem
|
type: (id: string) => void
A function that removes an item from the recent searches storage. |
getAll
|
type: () => TItem[]
A function that returns the items from the recent searches storage. |