< 3Kb. autocomplete component of pure javascript. 纯Javascript实现的轻量简洁的提示组件。
MIT License
< 3Kb. autocomplete component of pure javascript.
includes every sane browser and IE7+.
<input>
elementsJust 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.
suggestions
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.
limit
Allows you to limit the amount of search results that are displayed by horsey
. Defaults to Infinity
.
onselect
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