add possibility to use another container for suggestion items list (example: document.body) #17086

bsvobodny · 2017-08-10T13:07:41Z

add possibility to use another container for suggestion items list (example: document.body)
Indentation fixed ;)

LeaVerou · 2017-08-10T13:14:23Z

Please check the diffs you are submitting before you ask for review. It looks like there is still changed indentation.
Also, please do not pollute the commit history. If I merge this, I’ll have 4+ commits added to the commit history. It does not warrant more than 1, the rest are commits that just fix issues with the first one.
Also, I noticed you changed the version number in package.json. Please don't do that. It’s not up to any individual PR to decide when we are going to do a new release.
Thank you.

bsvobodny · 2017-08-10T13:16:39Z

ok, let me fix all that, and I will try again.

bsvobodny · 2017-08-10T13:43:46Z

I fixed all the indentation issues and rollback the version in package.json

The last issue is the commit history, but I don't know how can I merge all my commits in one.

bsvobodny · 2017-08-10T17:46:36Z

It seems that I managed to fix all the indent issues and merge all my commits in one.

I hope it's fine now ;)

thanks

LeaVerou

Thanks for the quick response! Just left some feedback on the actual changes, now that I can finally review them without all the unintentional changes getting in the way.

Zooming out a bit, what is unclear to me is, what use cases does this solve? E.g. what was your use case that made you need this functionality?

LeaVerou · 2017-08-10T20:25:00Z

awesomplete.js

@@ -169,7 +171,11 @@ _.prototype = {
 	},

 	open: function () {
+		if (this.listContainer !== 'container') {
+			this.setListPosition();


Shouldn't this be _.CONTAINER?

LeaVerou · 2017-08-10T20:27:00Z

awesomplete.js

@@ -179,6 +185,14 @@ _.prototype = {
 		$.fire(this.input, "awesomplete-open");
 	},

+	setListPosition: function () {


You seem to only be calling this function from one place, so it seems better to inline it there with a comment about what this code does. If in the future it's needed to reposition this list from multiple places then it can be moved to a function.

LeaVerou · 2017-08-10T20:27:39Z

awesomplete.js

@@ -179,6 +185,14 @@ _.prototype = {
 		$.fire(this.input, "awesomplete-open");
 	},

+	setListPosition: function () {
+		//get the bounding of the container to set the position of the suggestion list below
+		var boudingRect = this.container.getBoundingClientRect()


bounding, you missed a "n"

LeaVerou · 2017-08-10T20:28:53Z

package.json

@@ -29,4 +29,4 @@
    "karma-jasmine": "^0.3.6",
    "karma-jasmine-def": "^0.1.0"
  }
-}
+}


No need for any changes here?

LeaVerou · 2017-08-10T20:34:53Z

@vlazar want to add any feedback?

bsvobodny · 2017-08-10T20:42:46Z

@LeaVerou the reason why I needed this feature is because I'm using an autocomplete field in an area where the overflow is hidden, and the size of the area is limited so the suggestion list cannot go out of this area and is not visible.

bsvobodny · 2017-08-10T20:47:56Z

@LeaVerou I made some change accordingly to your comments.

…xample: document.body)

rustam87 · 2017-12-29T13:07:24Z

this changes are entered or no? because i am not seeing in production code

jack829 · 2018-04-26T16:09:12Z

@LeaVerou Any chance this will happen (soon)? I have the same issue as @bsvobodny.

addresses a use case where container element cannot reuse input element parent because input parent clips container content also solves LeaVerou#17086

addresses a use case where container element cannot reuse input element parent because input parent clips container content also solves LeaVerou#17086 & LeaVerou#16718

I've added a container function to options that will allow client to provide a different container element. The default version of container function creates container element as before. I believe this is in line with the item function that customizes creating item elements. This addresses my use case where container element cannot reuse the input element parent because the input parent clips container's content. It also addresses a case when input element has to be next to it's original siblings. It also solves #17086 & #16718 Thank you for consideration.

Goldjan · 2018-06-25T10:06:38Z

Is it now possible to specify the body as a container?
Something like this: container: 'document.body'

lucax88x · 2018-07-04T14:27:53Z

@LeaVerou I love the library, I try to use it every time I can, but every time I always encounters problem when I use it on a modal, or something that has an overflow, please merge this feature.. or implement it

LeaVerou · 2018-07-04T23:40:40Z

I'm ok merging this if the conflicts are resolved!

lucax88x · 2018-07-05T10:05:22Z

I noticed there's a new Container property in the options, it's on the docs but not released.

I tried it myself copying from github, it works partially... I can add the div to the body, but it's not correctly positioned and does not have the correct 'width', it's this intended for something else?

bsvobodny · 2018-07-05T14:08:43Z

It seems that the new container could do the job, I didn't try it yet.

lucax88x · 2018-07-05T14:15:09Z

As I said, it's probably not complete.. maybe we can 'finish' the current container? position & width are not working with this property

LeaVerou · 2018-07-06T03:08:41Z

@bsvobodny Thanks for resolving the conflicts! Can you try if the container property does what you need and let me know? It's probably not a good idea to merge a PR that duplicates existing functionality (if that's the case) and unfortunately I don't have the time to check it properly myself right now. :(

LeaVerou · 2018-07-06T03:09:45Z

Also it looks like Travis is complaining that several tests are failing. Have you run npm test before submitting this?

bsvobodny · 2018-07-06T13:09:29Z

I did it after... :(

DRocksCoding · 2020-04-14T23:20:33Z

Hello I searched through the issues to find some tips on this situation for myself too.

TLDR: how do you actually use the container property? I don't understand the explanation and didn't see a example. I'd jsut like to sit the ul inside the body.

I am trying to instantiate a awesomplete inside a table td cell but I need the ul element to sit outside of the table otherwise it gets hidden in the table overflow. I've tried messing around a few hours with the css and theres no success in my current setup.

Does any one have more experience with this than myself and could give some tips please ?
Thanks in advance

…to LeaVerou-gh-pages

#2)

bsvobodny force-pushed the gh-pages branch from 14bc565 to b8099ab Compare August 10, 2017 17:45

LeaVerou reviewed Aug 10, 2017

View reviewed changes

bsvobodny force-pushed the gh-pages branch from b8099ab to 3f8679c Compare August 10, 2017 20:46

bsvobodny force-pushed the gh-pages branch from 3f8679c to 60abcb5 Compare August 24, 2017 18:35

add possibility to use another container for suggestion items list (e…

92e837d

…xample: document.body)

bsvobodny force-pushed the gh-pages branch from 60abcb5 to 92e837d Compare August 24, 2017 18:43

melitele mentioned this pull request May 27, 2018

container function to generate container element #17142

Closed

melitele mentioned this pull request May 27, 2018

container function to generate container element #17143

Merged

resolve conflicts

6e60962

bsvobodny added 12 commits April 9, 2022 14:19

Merge branch 'gh-pages' of https://github.com/LeaVerou/awesomplete in…

7b15216

…to LeaVerou-gh-pages

Merge branch 'LeaVerou-gh-pages' into gh-pages

dbb3742

add possibility to use another container for suggestion items list (e… (

de1de89

#2)

Update removeSpec.js

fa25b0a

Update awesomplete.js

327ae82

Update awesomplete.js

232a765

Update awesomplete.js

d927f89

Update awesomplete.js

1d07be1

Update awesomplete.js

649451b

Update awesomplete.js

4b6b793

Update awesomplete.js

7a596f5

Update awesomplete.js

9bc8d7a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add possibility to use another container for suggestion items list (example: document.body) #17086

add possibility to use another container for suggestion items list (example: document.body) #17086

bsvobodny commented Aug 10, 2017

LeaVerou commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

LeaVerou left a comment

LeaVerou Aug 10, 2017

LeaVerou Aug 10, 2017

LeaVerou Aug 10, 2017

LeaVerou Aug 10, 2017

LeaVerou commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

rustam87 commented Dec 29, 2017

jack829 commented Apr 26, 2018

Goldjan commented Jun 25, 2018

lucax88x commented Jul 4, 2018

LeaVerou commented Jul 4, 2018

lucax88x commented Jul 5, 2018

bsvobodny commented Jul 5, 2018

lucax88x commented Jul 5, 2018

LeaVerou commented Jul 6, 2018

LeaVerou commented Jul 6, 2018

bsvobodny commented Jul 6, 2018

DRocksCoding commented Apr 14, 2020

add possibility to use another container for suggestion items list (example: document.body) #17086

Are you sure you want to change the base?

add possibility to use another container for suggestion items list (example: document.body) #17086

Conversation

bsvobodny commented Aug 10, 2017

LeaVerou commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

LeaVerou left a comment

Choose a reason for hiding this comment

LeaVerou Aug 10, 2017

Choose a reason for hiding this comment

LeaVerou Aug 10, 2017

Choose a reason for hiding this comment

LeaVerou Aug 10, 2017

Choose a reason for hiding this comment

LeaVerou Aug 10, 2017

Choose a reason for hiding this comment

LeaVerou commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

bsvobodny commented Aug 10, 2017

rustam87 commented Dec 29, 2017

jack829 commented Apr 26, 2018

Goldjan commented Jun 25, 2018

lucax88x commented Jul 4, 2018

LeaVerou commented Jul 4, 2018

lucax88x commented Jul 5, 2018

bsvobodny commented Jul 5, 2018

lucax88x commented Jul 5, 2018

LeaVerou commented Jul 6, 2018

LeaVerou commented Jul 6, 2018

bsvobodny commented Jul 6, 2018

DRocksCoding commented Apr 14, 2020