Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@algolia/autocomplete-core
Advanced tools
Core primitives for building autocomplete experiences.
@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.
FAQs
Core primitives for building autocomplete experiences.
The npm package @algolia/autocomplete-core receives a total of 576,649 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 0 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.