https://github.com/lamualfa/spectre-auto-complete
Autocomplete library for spectre css framework https://picturepan2.github.io/spectre/
https://github.com/lamualfa/spectre-auto-complete
autocomplete autocomplete-library css spectre
Last synced: 26 days ago
JSON representation
Autocomplete library for spectre css framework https://picturepan2.github.io/spectre/
- Host: GitHub
- URL: https://github.com/lamualfa/spectre-auto-complete
- Owner: lamualfa
- Created: 2019-08-12T16:26:25.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-08-18T10:53:51.000Z (about 6 years ago)
- Last Synced: 2025-08-27T01:35:49.750Z (about 2 months ago)
- Topics: autocomplete, autocomplete-library, css, spectre
- Language: JavaScript
- Size: 25.4 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# spectre-auto-complete
Autocomplete library for spectre css framework https://picturepan2.github.io/spectre/
### Instalation:
#### Requirement:
- JQuery 3.x
- Spectre 0.5.x
#### CDN:
[](https://www.jsdelivr.com/package/npm/spectre-auto-complete)
```
https://cdn.jsdelivr.net/npm/spectre-auto-complete@latest/spectre-auto-complete.min.css
https://cdn.jsdelivr.net/npm/spectre-auto-complete@latest/spectre-auto-complete.min.js
```
#### Example:
```html
```
### Usage:
**HTML**
```html
```
**Javascript**
```javascript
$(".form-autocomplete").autoComplete({
source: function(inputValue, callback) {
// Do something like fetch data with xhr
var data = ["apple", "banana", "guava"];
callback(data, null); // If error, you can use callback(null, error); . Error will passed as argument to error handler
}
});
```
### Options arguments:
```javascript
options["source"] = options.source || [];
options["render"] = options.render || defaultRender;
options["error"] = options.error || console.error;
options["delay"] = options.delay || 0;
options["minChar"] = options.minChar || 0;
options["menuClass"] = options.menuClass || "";
options["menuItemClass"] = options.menuItemClass || "";
options["empty"] = options.empty || "Not Found";
options["cache"] = options.cache || false;
options["clearCacheInterval"] = options.clearCacheInterval || 1000 * 60 * 10;
options["runOnFocus"] = options.runOnFocus || true;
```
### HANDLER
- `source(value, callback, $container, $inpt, opts)` :
- `value` : The value of `$inpt` element.
- `callback(data, error)` :
- `data` : Data will process to `render` handler.
- `error` : Error
- `$container` : JQuery element of the first initialize with `$container.autoComplete(opts)`.
- `$inpt` : JQuery element of the input element inside `$container`.
- `opts` : Options
- `render(value, data, $inpt, $menu, opts)` :
- `data` : Data from `callback(data)` in `source`.
- `$menu` : JQuery element from container of autocomplete.