Feature/handle array of objects #16795

TxHawks · 2015-12-09T15:20:43Z

Addresses #16788 by attaching the selected item's dataset to the event object that is passed when the awesomplete-select and awesomplete-selectcomplete events are fired.

In cases where out list is an array of objects, this allows adding data-* attributes to the lis when building the items based on keys in the object, and then accessing them when the awesomplete-select and awesomplete-selectcomplete events are fired.

Pass the selected item's dataset to the `awesomplete-select` and `awesomplete-selectcomplete` events to allow firing actions based on secondary keys in the object

Merge branch 'gh-pages' into feature/handle-array-of-objects

- Fix bug created in LeaVerou#16794, which caused different behaviours when selecting an item with the keyboard and with a mouse.

TxHawks · 2015-12-28T17:13:08Z

Not sure why the tests are failing - when I test in the browser locally, it all seem to work just fine...

TxHawks · 2016-01-02T14:22:40Z

@vlazar -

Sorry to bug you, but could you maybe take a look and see why the tests are failing? I tried, but didn't really manage to figure it out.

Thanks!

vlazar · 2016-01-02T14:56:04Z

@TxHawks I saw the call signature was changed from me.select(); to me.select(li, evt); and it looks like failing tests are calling this method with 1 argument or no arguments at all. So originalTarget would be accessed on undefined.

With changes you've made... Does the select() API method works as expected (as described in docs) with 1 argument or without any arguments for you?

vlazar · 2016-01-02T15:23:58Z

I probably was not clear enough. What I was referring to is this line https://github.com/TxHawks/awesomplete/blob/feature/handle-array-of-objects/awesomplete.js#L205

The originalEvent is expected to be passed as a second argument to the select() public API method. That's not always the case.

However I think this second argument is already quite a controversial feature to have. Why someone might need to pass originalEvent to the public API method in the first place?

Maybe #16794 was a nice addition, but should it really change the public API? We might want to hear @LeaVerou opinion on this matter.

This reverts commit dc966c9.

TxHawks · 2016-01-02T15:48:46Z

@vlazar -

You are absolutely right. I changed the code to that the event is optional again.

TxHawks · 2016-01-09T09:55:55Z

@LeaVerou - Sorry to nag, but any chance you can look at this #16796 and #16805? I need them for a project and don't like diverging from the maintained upstream.

Thanks!

No need to modify the event object, the selected element just needs to be passed to the fired events in `select()`.

vlazar · 2016-01-21T12:07:12Z

index.html

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


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.

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.

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

Note to self: do not write when sleep deprived.

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.

vlazar · 2016-02-15T13:22:18Z

To everyone interested in differentiating value from displayed text, aka key/value feature, aka array of objects feature.

The code is ready and it's almost 100% backward compatible. To ensure everything working fine for you we need your help with testing it in the wild before it's released. See this PR: Separate label/value for each suggestion in list

TxHawks · 2016-02-15T13:24:28Z

Will do.

Was following the thread(s) on #16852 and it looks pretty solid

TxHawks · 2016-02-15T13:26:59Z

@vlazar - could you post a comment summarize everything that changed in #16852? There were a few back and forths there on a few issues, and it could make everything less confusing.

Thank you again for all the work you are putting into this.

vlazar · 2016-02-15T13:29:10Z

@TxHawks Just let me know which part of #16852 description sounds confusing. I'll try to explain better.

TxHawks · 2016-02-15T13:34:09Z

You wen back and forth on __proto__ and how Suggestion will work, so you really need to read through everything to understad what you ended up going with. I did read it all, so I'm clear on that, but if someone wasn't following too closely, it may be harder to grasp. So maybe a summarizing comment on these two things could be good.

vlazar · 2016-02-15T14:02:15Z

Gotcha! We only care about external API, not internal implementation. But it's a good idea, I'll add a known issue with having Suggestion instead of just text as before.

vlazar · 2016-03-12T11:59:25Z

Separate label/value is landed #16866
It is also possible to initialize list with separate label/value via <datalist> or <ul>.

Read about different label and value at the end of Basic usage section and about new data method at the end of Extend section.

vlazar · 2016-03-16T16:15:52Z

Just a thought: I think we still need an advanced example based on yours. Like a small bookmark manager maybe?

vlazar · 2016-09-26T08:06:35Z

Closing this one since array of objects case is already supported.

TxHawks added 7 commits December 9, 2015 16:11

Pass selected item's data to the select* events

2f355e5

Pass the selected item's dataset to the `awesomplete-select` and `awesomplete-selectcomplete` events to allow firing actions based on secondary keys in the object

Add an array-of objects-list example to the docs

bf3adb9

Bring branch up to date with upstream

e93190d

Merge branch 'gh-pages' into feature/handle-array-of-objects

Align with changes introduced in LeaVerou#16794;

d94167a

- Fix bug created in LeaVerou#16794, which caused different behaviours when selecting an item with the keyboard and with a mouse.

Oops... forgot to add changes to the minified file

0ea78d7

Add missing ,

2951df6

Fix Array of objects example in index.html

e5ba0c0

TxHawks mentioned this pull request Dec 28, 2015

Pass the original event on select #16794

Merged

TxHawks added 4 commits January 2, 2016 17:41

Remove unused dataset property from awesomplete-select event

52dac84

Fix tests to add an event to select()

dc966c9

Make passing an event to select() optional

d7f99fc

Revert "Fix tests to add an event to select()"

da167eb

This reverts commit dc966c9.

TxHawks added 2 commits January 9, 2016 19:36

Bring up to date with upstream

b2532c1

Use selected instead of originalEvent.originalTarget

6342f43

No need to modify the event object, the selected element just needs to be passed to the fired events in `select()`.

This was referenced Jan 9, 2016

Pass selected node to event #16816

Closed

add key value support #16774

Closed

vlazar mentioned this pull request Jan 17, 2016

Feature/pass target to awesomplete select #16819

Closed

vlazar reviewed Jan 21, 2016
View reviewed changes

vlazar mentioned this pull request Jan 23, 2016

API consistency. Use item instead of text everywhere #16821

Open

vlazar added this to the v1.1 milestone Jan 31, 2016

TxHawks mentioned this pull request Feb 1, 2016

Add item data to awesomplete-select event #16835

Merged

vlazar modified the milestones: V1.2, v1.1 Mar 16, 2016

vlazar closed this Sep 26, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/handle array of objects #16795

Feature/handle array of objects #16795

TxHawks commented Dec 9, 2015

TxHawks commented Dec 28, 2015

TxHawks commented Jan 2, 2016

vlazar commented Jan 2, 2016

vlazar commented Jan 2, 2016

TxHawks commented Jan 2, 2016

TxHawks commented Jan 9, 2016

vlazar Jan 21, 2016

TxHawks Jan 21, 2016

TxHawks Jan 22, 2016

vlazar Jan 22, 2016

vlazar commented Feb 15, 2016

TxHawks commented Feb 15, 2016

TxHawks commented Feb 15, 2016

vlazar commented Feb 15, 2016

TxHawks commented Feb 15, 2016

vlazar commented Feb 15, 2016

vlazar commented Mar 12, 2016

vlazar commented Mar 16, 2016

vlazar commented Sep 26, 2016

Feature/handle array of objects #16795

Feature/handle array of objects #16795

Conversation

TxHawks commented Dec 9, 2015

TxHawks commented Dec 28, 2015

TxHawks commented Jan 2, 2016

vlazar commented Jan 2, 2016

vlazar commented Jan 2, 2016

TxHawks commented Jan 2, 2016

TxHawks commented Jan 9, 2016

vlazar Jan 21, 2016

Choose a reason for hiding this comment

TxHawks Jan 21, 2016

Choose a reason for hiding this comment

TxHawks Jan 22, 2016

Choose a reason for hiding this comment

vlazar Jan 22, 2016

Choose a reason for hiding this comment

vlazar commented Feb 15, 2016

TxHawks commented Feb 15, 2016

TxHawks commented Feb 15, 2016

vlazar commented Feb 15, 2016

TxHawks commented Feb 15, 2016

vlazar commented Feb 15, 2016

vlazar commented Mar 12, 2016

vlazar commented Mar 16, 2016

vlazar commented Sep 26, 2016