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

Feature/handle array of objects #16795

Closed
wants to merge 13 commits into from
Closed

Feature/handle array of objects #16795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2f355e5
Pass selected item's data to the select* events
TxHawks Dec 9, 2015
bf3adb9
Add an array-of objects-list example to the docs
TxHawks Dec 9, 2015
e93190d
Bring branch up to date with upstream
TxHawks Dec 28, 2015
d94167a
Align with changes introduced in #16794;
TxHawks Dec 28, 2015
0ea78d7
Oops... forgot to add changes to the minified file
TxHawks Dec 28, 2015
2951df6
Add missing `,`
TxHawks Dec 28, 2015
e5ba0c0
Fix Array of objects example in `index.html`
TxHawks Dec 28, 2015
52dac84
Remove unused `dataset` property from `awesomplete-select` event
TxHawks Jan 2, 2016
dc966c9
Fix tests to add an event to select()
TxHawks Jan 2, 2016
d7f99fc
Make passing an event to `select()` optional
TxHawks Jan 2, 2016
da167eb
Revert "Fix tests to add an event to select()"
TxHawks Jan 2, 2016
b2532c1
Bring up to date with upstream
TxHawks Jan 9, 2016
6342f43
Use `selected` instead of originalEvent.originalTarget
TxHawks Jan 9, 2016
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
11 changes: 7 additions & 4 deletions awesomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,9 @@ var _ = function (input, o) {
// Enter / Esc / Up / Down
if(me.opened) {
if (c === 13 && me.selected) { // Enter
var li = me.ul.children[me.index];
evt.preventDefault();
me.select();
me.select(li, evt);
}
else if (c === 27) { // Esc
me.close();
Expand Down Expand Up @@ -198,16 +199,18 @@ _.prototype = {

$.fire(this.input, "awesomplete-select", {
text: selected.textContent,
originalTarget: selected,
preventDefault: function () {
prevented = true;
},
originalEvent: originalEvent
}
});

if (!prevented) {
this.replace(selected.textContent);
this.close();
$.fire(this.input, "awesomplete-selectcomplete");
$.fire(this.input, "awesomplete-selectcomplete", {
originalTarget: selected
});
}
}
},
Expand Down
13 changes: 7 additions & 6 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.

48 changes: 48 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,54 @@ <h2>Ajax example <small>(restcountries.eu api)</small></h2>
}
ajax.send();
</script></code></pre>
</section>

<section id="array-of-objects">
<h2>Working with an array of objects</h2>
<label class="">Search for one of Lea's projects: <input type="text"></label>

<pre class="language-javascript"><code> <script>
var arrOfObj = document.querySelector('#array-of-objects input');

new Awesomplete(arrOfObj,{
list: [
{
"name": "Awesomplete",
"url": "https://leaverou.github.io/awesomplete/"
},
{
"name": "Bliss",
"url": "https://blissfuljs.com"
},
{
"name": "Stretchy",
"url": "https://leaverou.github.io/stretchy/"
},
{
"name": "chainvas",
"url": "https://leaverou.github.com/chainvas"
}
],
filter: function(text, input) {
return Awesomplete.FILTER_CONTAINS(text.name, input)
},
item: function(item, input) {
var html = item.name.replace(RegExp(Awesomplete.$.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>") +
" (" + item.url + ")";
return Awesomplete.$.create("li", {
innerHTML: html,
"data-url": item.url,
"aria-selected": "false"
})
}
});

arrOfObj.addEventListener('awesomplete-selectcomplete', function(e){
// Do something with e.originalTarget.getAttribute('data-*')
console.log(e.originalTarget.getAttribute('data-url'));
Copy link
Collaborator

Choose a reason for hiding this comment

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

Might be a good idea to do something visual here, instead of doing console.log. One obvious example would be to use only URL property of item as input value when selected.

Unfortunately, having selected element passed into awesomplete-selectcomplete here in e.originalTarget allows only a hacky way to use different value for input when selected.

We can change input value:

e.target.value = e.originalTarget.getAttribute('data-url');

But this will happen after an input value was already changed to selected.textContent by awesomplete itself.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I also think that changing the input value in the event isn't good practice, as it can be easily done in the item function to begin with.

I do agree that console.log() doesn't exactly showcase this ability very well though. I'll try and think of something better.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Strike what I said in the previous comment, it's absolutly rubbish.

Note to self: do not write when sleep deprived.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I understood you actually meant replace function, where the input value is assigned from selected text now. Having item instead of text in replace would make it possible to assign either item's key or value or some combination of them to input.value.

});
</script></code></pre>
</section>
</section>

<section id="download">
Expand Down