email-autocomplete

2018-08-12 admin

email-autocomplete是什么

什么是email-autocomplete,jQuery plugin that displays in-place autocomplete suggestions for email input fields.

email-autocomplete介绍、email-autocomplete使用

A jQuery plugin that suggests and autocompletes the domain whenever your users type in an email address field.

Build StatusCDNJS version

What does it do?

When your user types in “user@gm”, the plugin will suggest for e.g. “user@gmail.com”, based on the first result from a list of predefined email domains.

diagram

Press the tab-key, or simply click on the suggestion to automatically fill in the rest of the domain. (or tap on the suggestion for mobile users.)

You can also use the right arrow key.

See a live demo here.

Installation

Bower

bower install email-autocomplete --save

Download

Download or clone this repo and copy dist/jquery.email-autocomplete.min.js into your javascripts directory.

Usage (jQuery)

Add jquery.email-autocomplete.min.js into your HTML, before the closing </body> tag.

<script src="jquery.min.js"></script>
<script src="jquery.email-autocomplete.min.js"></script>

You should also have a email input field.

<input id="email" name="email" type="email" />

Now, attach the plugin to the email input field.

<script>
$("#email").emailautocomplete({
  suggClass: "custom-classname",
  domains: ["example.com"]
});
</script>

Settings

Option Type Default Description
suggClass string ‘eac-sugg’ Classname for the suggestion text element.
domains array See list of domains below Array of domains used for autocompleting.

Styling

Use the following CSS to style the suggestion text color. Remember to update the classname if you’ve changed it to a custom one.

.eac-sugg {
  color: #ccc;
}

Domains

These are the plugin default domains if the domains option is not supplied.

  • gmail.com
  • googlemail.com
  • yahoo.com
  • yahoo.co.uk
  • hotmail.com
  • hotmail.co.uk
  • live.com
  • msn.com
  • comcast.net
  • sbcglobal.net
  • verizon.net
  • facebook.com
  • outlook.com
  • att.net
  • gmx.com
  • icloud.com
  • me.com
  • mac.com
  • aol.com

Author

Known Issues

  • On Android stock browser, if “Settings > Accessibility > Scale text up and down” value is not at 100%, the text width will be calculated incorrectly.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37779.html

文章标题:email-autocomplete

回到顶部