amazon-autocomplete
Advanced tools
A vanilla JavaScript plugin to unlock the full power of the Amazon autocompletion engine right into your search input.
AmazonAutocomplete is a vanilla JavaScript plugin to unlock the full power of the Amazon autocompletion engine right into your search input.
Demo: http://carlosroso.com/amazon-autocomplete
You can grab the minified file from /dist or unminified from /src but I highly recommend installation through npm.
npm install --save amazon-autocomplete
Or you can install it using yarn as well:
yarn add amazon-autocomplete
Now add it to your html file:
<html>
<body>
...
<script src="/path/to/amazon-autocomplete.min.js" type="text/javascript"></script>
</body>
</html>
Create a text input in your html file for the search field.
<input type="text" id="search-input"/>
Edit your main JavaScript file to create an AmazonAutocomplete instance with your search field CSS selector.
let searchInput = new AmazonAutocomplete('#search-input');
Now you got a search field on steroids. Go ahead and apply some styles to make it shine.
This is a pretty lightweight JavaScript library so it applies just a few styles to some elements to make it work. You can apply your own styles and customize the look of all the components within the widget. If you’re not that much into CSS, you can grab the following snippet and safely shot it into your stylesheet to get a decent default look. As you can see, AmazonAutocomplete goes all the way BEM.
/* Words container */
.ac__inner{
background: #f6f6f6;
}
/* Individual word element */
.ac__word{
margin: 0;
padding: 5px;
}
/* Word prefix style. It’s the span containing the search keyword within the word. */
.ac__prefix{
font-weight: bold;
}
/* Style applied to each words while navigating through the list or on hover */
.ac__word--selected, .ac__word:hover{
background-color: #e3e3e3;
}
You can customize the plugin behaviour by passing along a config object when instantiating AmazonAutocomplete. These are the properties you can specify:
new AmazonAutocomplete([paramsObject])| Param | Type | Required | Details |
|---|---|---|---|
| selector | string | Yes | CSS selector of the search field. |
| delay | integer | No | The keyup event on the search field is debounced. This attribute will set the fire rate limit (in milliseconds) on the keyup event callback. Default: 200 |
| showWords | boolean | No | Enable/disable revealing of the words list panel. Can be useful if you want to show the suggested words on your own custom widget. Default: true |
| hideOnblur | boolean | No | Indicates whether the words list panel should hide when the search field loses focus. Default: true |
Each AmazonAutocomplete instance will fire some events. You can susbscribe to these events to, for example, save the selected word in your DB or to show suggested words in your own widget.
| Event | Callback Param | Details |
|---|---|---|
| onSelectedWord | string | This is event is fired when some of the following actions takes place:
|
| onNewWords | array | This is event is fired when there are new suggested words available. It mostly happens when the keyup event fires on the search field. Keep in mind that the keyup is debounced to improve performance. |
The next snippet shows how to initialize a AmazonAutocomplete with a 200ms debounce limit, not showing the words panel and not hiding on input text blur. As the words won’t show in the dropdown panel we’ll have to shown them in a custom panel.
//Create the AmazonAutocomplete with our desired properties
let searchInput = new AmazonAutocomplete({
selector: '#search-input',
delay: 200,
showWords: false,
hideOnblur: false
});
//Log the selected word to the console
searchInput.onSelectedWord(word => console.log(`searching for ${word}...`));
//Populate your custom panel whenever there are new suggested words available
searchInput.onNewWords(words => words.forEach(word => addWordToCustomPanel(word)));
AmazonAutocomplete is licensed under MIT licence.
FAQs
A vanilla JavaScript plugin to unlock the full power of the Amazon autocompletion engine right into your search input.
We found that amazon-autocomplete demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.