https://github.com/diogo405/parrot
Email autocomplete for mobile
https://github.com/diogo405/parrot
Last synced: 4 months ago
JSON representation
Email autocomplete for mobile
- Host: GitHub
- URL: https://github.com/diogo405/parrot
- Owner: diogo405
- Created: 2018-12-28T06:10:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-15T23:55:14.000Z (over 6 years ago)
- Last Synced: 2025-01-07T23:55:29.641Z (5 months ago)
- Language: JavaScript
- Size: 105 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Parrot
An email autocomplete for mobile
## How to use it 🤔
1. Add 'js-parrot' class to your email input (you can change the selector, see section below)
2. Put parrot.js script (only 2kb) in your page
3. Instantiate it
4. Style it as you like :)
```
.
.
.
.
.
.
new Parrot();
```
## Options
The default configuration is:
```
this.default = {
inputSelector: '.js-parrot',
domains: [
"gmail.com",
"hotmail.com",
"yahoo.com",
"outlook.com",
"live.com",
"icloud.com",
"msn.com",
],
onSelect: function(suggestion) {
console.log(`Parrot > suggestion selected: ${suggestion.outerHTML}`);
}
};
```
You can override that passing a JSON object as a param:
```
new Parrot({
inputSelector: 'input[name="email"]',
domains: ["gmail.com", "yahoo.com", "yahoo.com.au"],
onSelect: function() {
document.dispatchEvent(new Event("email-suggestion-selected"));
}
})
```
## CSSing
Parrot is gonna create a div after your email input with all the suggestions. The container is gonna be a "div.parrot-suggestions". Each suggestion inside the container is gonna be "div.parrot-suggestion" (w/out 's').
CSS example:
```
.parrot-suggestions {
background: white;
width: 400px;
margin: auto;
border: 2px solid black;
box-sizing: border-box;
padding: 10px;
}
.parrot-suggestion {
margin-top: 10px;
cursor: pointer;
color: grey;
}
.parrot-suggestion:first-child {
margin-top: 0;
}
```
## Html Sample
Download and run sample.html in your browser 👍🏽
## License
This project is licensed under the 🐦 License️