Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@algolia/autocomplete-core
Advanced tools
@algolia/autocomplete-core is a headless autocomplete library that provides the core logic and state management for building autocomplete experiences. It allows developers to create highly customizable and accessible autocomplete components without being tied to a specific UI framework.
Basic Autocomplete Setup
This code sets up a basic autocomplete instance with a single source of items. The `onStateChange` function logs the current state of the autocomplete, and the `getSources` function returns a list of items based on the query.
const { createAutocomplete } = require('@algolia/autocomplete-core');
const autocomplete = createAutocomplete({
onStateChange({ state }) {
console.log(state); // Logs the current state of the autocomplete
},
getSources() {
return [
{
sourceId: 'example-source',
getItems({ query }) {
return [
{ label: 'Item 1' },
{ label: 'Item 2' },
{ label: 'Item 3' }
];
}
}
];
}
});
Customizing Autocomplete Items
This code demonstrates how to customize the items in the autocomplete dropdown. It fetches items from an external API based on the query and uses a custom template to render each item.
const { createAutocomplete } = require('@algolia/autocomplete-core');
const autocomplete = createAutocomplete({
onStateChange({ state }) {
console.log(state); // Logs the current state of the autocomplete
},
getSources() {
return [
{
sourceId: 'custom-source',
getItems({ query }) {
return fetch(`https://api.example.com/search?q=${query}`)
.then(response => response.json())
.then(data => data.items);
},
templates: {
item({ item }) {
return `<div>${item.label}</div>`;
}
}
}
];
}
});
Handling Multiple Sources
This code shows how to handle multiple sources in the autocomplete. Each source fetches items from a different API endpoint based on the query.
const { createAutocomplete } = require('@algolia/autocomplete-core');
const autocomplete = createAutocomplete({
onStateChange({ state }) {
console.log(state); // Logs the current state of the autocomplete
},
getSources() {
return [
{
sourceId: 'source-1',
getItems({ query }) {
return fetch(`https://api.example.com/source1?q=${query}`)
.then(response => response.json())
.then(data => data.items);
}
},
{
sourceId: 'source-2',
getItems({ query }) {
return fetch(`https://api.example.com/source2?q=${query}`)
.then(response => response.json())
.then(data => data.items);
}
}
];
}
});
Downshift is a library that provides primitives to build flexible and accessible autocomplete, combobox, and select components. It offers more control over the rendering and behavior of the components compared to @algolia/autocomplete-core, but requires more setup and customization.
React Autosuggest is a library for building autocomplete components in React. It provides a higher-level abstraction compared to @algolia/autocomplete-core, making it easier to get started but less flexible in terms of customization and control over the autocomplete logic.
React InstantSearch is a library by Algolia that provides a set of React components to build search interfaces. It is more opinionated and higher-level compared to @algolia/autocomplete-core, offering built-in components for common search use cases but less flexibility for custom autocomplete implementations.
The autocomplete-core
package is the foundation of Autocomplete. It exposes primitives to build an autocomplete experience.
You likely don’t need to use this package directly unless you’re building a renderer.
yarn add @algolia/autocomplete-core
# or
npm install @algolia/autocomplete-core
See Documentation.
1.9.0 (2023-04-24)
insights
option to enable the Insights plugin (#1121) (c9d06fd)search-insights@2.6.0
(#1109) (63dd995)FAQs
Core primitives for building autocomplete experiences.
The npm package @algolia/autocomplete-core receives a total of 337,305 weekly downloads. As such, @algolia/autocomplete-core popularity was classified as popular.
We found that @algolia/autocomplete-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 82 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.