Cache-AutoComplete
Probably not what you're looking for, but it works for me :stuck_out_tongue: :poop:
File size = 7.09kb - gzipped = 2.44kb
Explanation
I needed a simple auto complete component for a web app that supported keyboard navigation.
I wanted something light weight and flexible.
After searching around, nothing fit my use case or desire. The component
defaults to Material Design-like styling. This is customizable by setting itemClass
and listClass
when creating the component. PRs welcome to improve functionality.
Just want to keep this light weight :smile:
Installation
npm install cache-autocomplete
Usage
cacheautocomplete
is exposed as a library thanks to Webpack so using a <script>
tag on your html will work. You can also import/require what you need using the module if you're using a module loader for your app.
JS
var CAC = new cacheautocomplete.AutoComplete({
element: document.getElementById("myAutoComplete"),
url: 'https://api.test.com/api/customer/typeahead?name={{ value }}&apikey=84',
itemTemplate: '<div> <h3>{{ Name }}</h3> <img src="{{ ProfilePic }} /> </div>',
keys: ['Name', 'ProfilePic']
onSelect: function (selectedItem, autoComplete) {
console.log(selectedItem);
rootInput.value = selectedItem.SomeProp;
}
});
HTML
<input id="myAutoComplete" type="text" />
Public Methods
clearCache(url?: string)
- If a url is specified only that url is removed from storage.
If no url is specified all CacheAutoComplete items are removed from storage.
CacheAutoCompleteOptions
interface CACompleteOptions {
element: HTMLInputElement;
url: string;
itemTemplate: any;
keys: string[];
onSelect: Function;
minLength?: number;
cache?: boolean;
listClass?: string;
itemClass?: string;
}
Contributing
git clone https://github.com/bradmartin/cache-autocomplete.git
npm install
- install depsnpm run dev
- will transpile and kick off the webpack dev server