Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow preexisting wrapper and custom class names #16805

Open
wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open

Allow preexisting wrapper and custom class names #16805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74c3e8f
Allow preexisting wrapper and custom class names
TxHawks Dec 28, 2015
f069549
fix wrapper test
TxHawks Dec 28, 2015
456e773
Change default className of wrapper element back to `.awesomplete`
TxHawks Dec 30, 2015
781b2ae
Forgot to update tests (see previous commit)
TxHawks Dec 30, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion awesomplete.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,4 +94,4 @@ div.awesomplete > ul:empty {
div.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
}
19 changes: 12 additions & 7 deletions awesomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ var _ = function (input, o) {
configure.call(this, {
minChars: 2,
maxItems: 10,
containerClass: "awesomplete",
ulClass: null,
statusClass: "visually-hidden",
autoFirst: false,
filter: _.FILTER_CONTAINS,
sort: _.SORT_BYLENGTH,
Expand All @@ -40,18 +43,20 @@ var _ = function (input, o) {

// Create necessary elements

this.container = $.create("div", {
className: "awesomplete",
around: input
});
this.container = $("." + this.containerClass, this.input.parentNode) ||
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the point is allowing a custom element for this, why not accept an element instead of a class? Or a selector, at the very least? Also, how will an element be around input and still be a child of its parent? Unless I’m missing something, that seems impossible.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ehm, no not really...

#16718 is about having a structure where an element must remain a sibling of the input, like in many material-design implementations.

right now, if we have

<div class="some-wrapper-class">
  <input id="search" class="awesomplete someOtherClass" />
  <label for="search">Search for something</label>
</div>

Awesomplete will wrap the input with a div, separating it from from the label:

<div class="some-wrapper-class">
  <div class="awesomplete">
    <input id="search" class="awesomplete someOtherClass" />
  </div>
  <label for="search">Search for something</label>
</div>

What's needed to resolve #16718 is for new Awesomeplete('.awsomplete', {containerClass: 'some-wrapper-class'} to not wrap the input - because it is already wrapped by some-wrapper-class - leaving us with the original structure, so that the input and the label remain siblings.

This, inherently, also allows for custom elements, as it just looks at the existing html to see if it can be left as is, or needs modifying, based on a class name. new Awesomplete should just leave the following as is, allowing for the wrapper to be an element that isn't a div:

<label class="awesomplete">
  <input id="search" class="awesomplete someOtherClass" />
  Search for something
</label>

$.create("div", {
className: this.containerClass,
around: input
});

this.ul = $.create("ul", {
className: this.ulClass || "",
hidden: "hidden",
inside: this.container
});

this.status = $.create("span", {
className: "visually-hidden",
className: this.statusClass,
role: "status",
"aria-live": "assertive",
"aria-relevant": "additions",
Expand Down Expand Up @@ -140,7 +145,7 @@ _.prototype = {
},

get opened() {
return this.ul && this.ul.getAttribute("hidden") == null;
return this.ul && this.ul.getAttribute("hidden") === null;
},

close: function () {
Expand Down Expand Up @@ -353,7 +358,7 @@ $.fire = function(target, type, properties) {

$.regExpEscape = function (s) {
return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
}
};

// Initialization

Expand Down
17 changes: 9 additions & 8 deletions awesomplete.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 33 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,15 @@ <h1>Basic usage</h1>
<p>Before you try anything, you need to include <code>awesomplete.css</code> and <code>awesomplete.js</code> in your page, via the usual <code>&lt;link rel="stylesheet" href="awesomplete.css" /></code> and <code>&lt;script src="awesomplete.js" async>&lt;/script></code> tags.</p>

<p>For the autocomplete, you just need an <code>&lt;input></code> text field (might work on <code>&lt;textarea></code> and elements with <code>contentEditable</code>, but that hasn’t been tested). Add <code>class="awesomplete"</code> for it to be <strong>automatically processed</strong> (you can still specify many options via HTML attributes), otherwise you can instantiate with a few lines of JS code, which allow for more customization.</p>

<p><strong>Note:</strong> By default, Awesomplete will wrap your input in a div with a class of 'awesomplete'. If other elements need to stay a sibling of your input, such as a label, you can simply place the input in an element with the that class beforehand, and Awesomplete will pick it up:</p>

<pre class="language-markup"><code>&lt;div class="awesomplete">
&lt;input class="awesomplete"
data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />
&lt;label>My label&lt;/label>
&lt;/div></code></pre>

<p>There are many ways <strong>to link an input to a list of suggestions</strong>. The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load:</p>

<pre class="language-markup"><code>&lt;input class="awesomplete" list="mylist" />
Expand Down Expand Up @@ -176,6 +185,30 @@ <h1>Customize</h1>
<td>Number</td>
<td>10</td>
</tr>
<tr>
<td><code>containerClass</code></td>
<td><code>data-containerclass</code></td>
<td>The class of the element wrapping the input. If no element with is class is found wrapping the input, one will be created.</td>
<td>String</td>
<td>"awesomplete"</td>
</tr>
<tr>
<td><code>ulClass</code></td>
<td><code>data-ulclass</code></td>
<td>The class that will be attached to the results <code>ul</code></td>
<td><ul>
<li>String</li>
<li>Null</li>
</ul></td>
<td>null</td>
</tr>
<tr>
<td><code>statusClass</code></td>
<td><code>data-statusclass</code></td>
<td>The class that will be attached to the status class</td>
<td>String</td>
<td>"visually-hihdden"</td>
</tr>
<tr>
<td><code>autoFirst</code></td>
<td><code>data-autofirst</code></td>
Expand Down