diff options
| author | Lea Verou <lea@verou.me> | 2015-03-02 06:07:24 -0500 |
|---|---|---|
| committer | Lea Verou <lea@verou.me> | 2015-03-02 06:08:16 -0500 |
| commit | 416f91b3a94e7237b5f06af70c42d22992051441 (patch) | |
| tree | a1a5180c3738b4d76fe884488feeecf5d690672e | |
| parent | ef7ad86af9f74ac33eb45f497075c22e640171b6 (diff) | |
| download | awesomplete-416f91b3a94e7237b5f06af70c42d22992051441.zip awesomplete-416f91b3a94e7237b5f06af70c42d22992051441.tar.gz awesomplete-416f91b3a94e7237b5f06af70c42d22992051441.tar.bz2 | |
Improved advanced examples section, improved email example, added tags example
| -rw-r--r-- | awesomplete.js | 2 | ||||
| -rw-r--r-- | index.html | 71 | ||||
| -rw-r--r-- | index.js | 44 |
3 files changed, 49 insertions, 68 deletions
diff --git a/awesomplete.js b/awesomplete.js index a1dcd0f..10429d2 100644 --- a/awesomplete.js +++ b/awesomplete.js @@ -78,7 +78,7 @@ var _ = self.Awesomplete = function (input, o) { } }); - $.bind(this.input.form, {"submit": me.close.bind(me)}); + $.bind(this.input.form, {"submit": this.close.bind(this)}); $.bind(this.ul, {"mousedown": function(evt) { var li = evt.target; @@ -8,6 +8,8 @@ <link rel="stylesheet" href="awesomplete.css" /> <link rel="stylesheet" href="style.css" /> +<script src="awesomplete.js"></script> +<script src="index.js"></script> </head> <body class="language-markup"> @@ -320,43 +322,43 @@ awesomplete.list = ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.j <section id="advanced-examples"> <h1>Advanced Examples</h1> + <p>These examples show how powerful Awesomplete’s minimal API can be.</p> + + <section id="email"> <h2>E-mail autocomplete</h2> - <p><input id="emailInput"></p> - <pre class="language-markup"><code><input id="emailInput" /></code></pre> - <pre class="language-javascript"><code> -var emailInput = Awesomplete.$("#emailInput"); -var emailAwesomplete = new Awesomplete(emailInput, { - // List of emails domains + <label>Type an email: <input type="email"></label> + <pre class="language-markup"><code><input type="email" /></code></pre> + <pre class="language-javascript"><code><script>new Awesomplete($('input[type="email"]'), { list: ["@aol.com", "@att.net", "@comcast.net", "@facebook.com", "@gmail.com", "@gmx.com", "@googlemail.com", "@google.com", "@hotmail.com", "@hotmail.co.uk", "@mac.com", "@me.com", "@mail.com", "@msn.com", "@live.com", "@sbcglobal.net", "@verizon.net", "@yahoo.com", "@yahoo.co.uk"], - - // Suggestions list modification item: function(text, input){ - // join the user input with the email suggestion - var newText = input.slice(0, input.indexOf("@")) + text; - - // create the node with the suggestion - return Awesomplete.$.create("li", { - innerHTML: newText.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"), - "aria-selected": "false" - }); - }, - - // E-mail filter + var newText = input.slice(0, input.indexOf("@")) + text; + + return Awesomplete.$.create("li", { + innerHTML: newText.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"), + "aria-selected": "false" + }); + }, filter: function(text, input){ - var atPosition = input.indexOf("@"); - // verify if it's an email (has @) and it has at least one letter to search - var inputIsEmail = !!~atPosition && (input.length > atPosition + 1); - - // get the email part of the user input - var emailPart = input.slice(input.indexOf("@")); - - // check if the email part is on the domains list - var textMatchWithInput = RegExp("^" + emailPart.trim(), "i").test(text); - - return (inputIsEmail && textMatchWithInput); - } -}); - </code></pre> + return RegExp("^" + Awesomplete.$.regExpEscape(input.replace(/^.+?(?=@)/, ''), "i")).test(text); + } +});</script></code></pre> + </section> + + <section id="multiple-values"> + <h2>Multiple values</h2> + <label>Tags (comma separated): <input data-list="CSS, JavaScript, HTML, SVG, ARIA, MathML" data-multiple data-minchars="1" /></label> + <pre class="language-markup"><code><input data-list="CSS, JavaScript, HTML, SVG, ARIA, MathML" data-multiple /></code></pre> + <pre class="language-javascript"><code><script>new Awesomplete($('input[data-multiple]'), { + filter: function(text, input) { + return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]); + }, + + replace: function(text) { + var before = this.input.value.match(/^.+,\s*|/)[0]; + this.input.value = before + text + ", "; + } +});</script></code></pre> + </section> </section> <section id="download"> @@ -374,9 +376,8 @@ var emailAwesomplete = new Awesomplete(emailInput, { <footer>Made with ♥ by <a href="http://lea.verou.me">Lea Verou</a> • <a href="http://lea.verou.me/2015/02/awesomplete-2kb-autocomplete-with-zero-dependencies">Read the blog post</a> • <a href="http://shop.oreilly.com/product/0636920031123.do">Buy my book!</a> </footer> -<script src="awesomplete.js"></script> + <script src="https://leaverou.github.io/prism/prism.js" defer></script> -<script src="index.js"></script> <a href="https://twitter.com/share" class="twitter-share-button" data-via="LeaVerou" data-size="large">Tweet</a> <script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=leaveroume" id="_carbonads_js"></script> @@ -1,35 +1,15 @@ $ = Awesomplete.$; $$ = Awesomplete.$$; -var nav = $("nav") -$$("section > h1").forEach(function (h1) { - if (h1.parentNode.id) { - $.create("a", { - href: "#" + h1.parentNode.id, - textContent: h1.textContent.replace(/\(.+?\)/g, ""), - inside: nav - }); - } -}); - -//email example -var emailInput = $("#emailInput"); -var emailAwesomplete = new Awesomplete(emailInput, { - list: ["@aol.com", "@att.net", "@comcast.net", "@facebook.com", "@gmail.com", "@gmx.com", "@googlemail.com", "@google.com", "@hotmail.com", "@hotmail.co.uk", "@mac.com", "@me.com", "@mail.com", "@msn.com", "@live.com", "@sbcglobal.net", "@verizon.net", "@yahoo.com", "@yahoo.co.uk"], - item: function(text, input){ - var newText = input.slice(0, input.indexOf("@")) + text; - - return Awesomplete.$.create("li", { - innerHTML: newText.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"), - "aria-selected": "false" - }); - }, - filter: function(text, input){ - var atPosition = input.indexOf("@"); - var inputIsEmail = !!~atPosition && (input.length > atPosition + 1); - var emailPart = input.slice(input.indexOf("@")); - var textMatchWithInput = RegExp("^" + emailPart.trim(), "i").test(text); - - return (inputIsEmail && textMatchWithInput); - } -}); +document.addEventListener("DOMContentLoaded", function() { + var nav = $("nav") + $$("section > h1").forEach(function (h1) { + if (h1.parentNode.id) { + $.create("a", { + href: "#" + h1.parentNode.id, + textContent: h1.textContent.replace(/\(.+?\)/g, ""), + inside: nav + }); + } + }); +});
\ No newline at end of file |