Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jinhduong/lazee
💨 The simple, lightweight, Google search like and pure javascript auto-complete
https://github.com/jinhduong/lazee
autocomplete typescript
Last synced: 8 days ago
JSON representation
💨 The simple, lightweight, Google search like and pure javascript auto-complete
- Host: GitHub
- URL: https://github.com/jinhduong/lazee
- Owner: jinhduong
- Created: 2018-06-28T11:00:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-01T06:42:32.000Z (over 6 years ago)
- Last Synced: 2024-10-13T13:23:18.631Z (2 months ago)
- Topics: autocomplete, typescript
- Language: TypeScript
- Homepage:
- Size: 188 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# lazee
💨 The simple, lightweight, Google search like and pure javascript auto-complete.
- Only `3kb` script, `1kb` css
- Easy to implement and modify
- Google like desgin
[](https://travis-ci.org/jinhduong/lazee)
Download lastest build at `dist` folder.
## Usage
```html
var $autoComplete = new Lazee('#autocomplete', {
debounceTime: 200,
getData: function (searchingValue) {
return fetch('https://jsonplaceholder.typicode.com/users')
.then(data => data.json())
.then(data => {
return data.filter(x => x.name.includes(searchingValue));
});
},
displayProp: 'name'
});
```
## Configs
All of config types in `models/*` folder.
### LazeeConfig
```ts
export interface LazeeConfig {
debounceTime?: number;
onfocus?: (currentElem: Element) => void;
outfocus?: (currentElem: Element) => void;
/**
* When user typing value into input
*/
typing?: (value: any, event: KeyboardEvent) => void;
/**
* When user press enter
*/
enter?: (value: any, event: KeyboardEvent) => void;
/**
* Give searchingValue then receive a result (maybe is promise)
*/
getData?: (searchingValue: any) => Promise | any[];
/**
* Property that will display to autocomplete, default is string item
* And display itself
*/
displayProp?: string;
/**
* When user click into suggestion items
*/
itemClick?: (item: any) => void;
/**
* Search method will be called after the lenght of world >= this value
*/
wordLen?: number;
}
```
### Lazee Object
```ts
export interface LazeeReturnObject {
/**
* Return current value
*/
value: () => any;
/**
* Return current item
*/
item: () => any;
}
```
## Library files
This library written by `Typescript`, `SCSS` and use `Rollup` for bunder.
- `src/lazee.ts`: Source
- `src/lazee.scss`: Styles
### Build
```sh
npm run build
```
### Dev mode
```sh
npm run dev
npm run scss
npm run rollup
```
---
Licensed under [MIT](http://amsul.ca/MIT)