< 3Kb. autocomplete component of pure javascript.
includes every sane browser and IE7+.
- Small and focused, 2.97kb, smaller after gzip
- Natural keyboard navigation
- Fuzzy searching
- Supports
<input>elements
Just link to you website use link and script.
<link href="dist/horse.css" rel="stylesheet" type="text/css">
<script src="dist/horse.js"></script>
or npm install horse.js, thenrequire:
import horse from 'horse.js';
// or
var horse = require("horse.js");You can see a live demo here.
or USAGE in website: http://www.aTool.org
horse(document.querySelector('input'), {
suggestions: [
{ value: 'banana', text: 'Bananas from Amazon Rainforest' },
{ value: 'apple', text: 'Red apples from New Zealand' },
{ value: 'orange', text: 'Oranges from Moscow' },
{ value: 'lemon', text: 'Juicy lemons from the rich Amalfitan Coast' }
],
onselect: function(li, suggestion) {
alert("you select " + suggestion['text']);
}
});More examples here, live demo here.
Entry point is horse(el, options). Configuration options are detailed below.
An array containing a list of suggestions to be presented to the user. Each suggestion can be either a string or an object. If an object is used, the text property will be used for displaying the suggestion and the value property will be used when a suggestion is selected.
Allows you to limit the amount of search results that are displayed by horsey. Defaults to Infinity.
Allows you set the event handler when select an option.
How to use the OPTIONs, can see detail in the live demo, live demo here.
I needed a fast, easy to use, and reliable autocomplete library.
The ones I stumbled upon were too bloated, too opinionated, or provided an unfriendly human experience, or the js file is too large.
Inspirated by projects below, Thx~^_^
MIT