floating-box under- input
up vote
0
down vote
favorite
I'm developing a website and per requeriments, there's one thing I can't manage to figure out the best way to implement.
https://www.lacestitadelbebe.es Take a look at this website. You can see there's a search form in the front page, the "c00l" thing about it, is that once you click on the field ("¿Que Buscas?"), it pops up a list of "suggestions". Or categoryes about related stuff.
I'm trying to accomplish the same behaviour, but avoiding loadings (I already have the information to be shown beforehand). I believe it could be accomplished by CSS and hidden divs or bootstrap. The thing is, I do not know how to accomplish that. How to popup a floating box under the exact position of the input box.
Could someone give me an example? Thanks beforehand.
jquery html css twitter-bootstrap
asked Nov 21 at 15:10
Alissa Rosaddo
1
add a comment |
up vote
0
down vote
favorite
I'm developing a website and per requeriments, there's one thing I can't manage to figure out the best way to implement.
https://www.lacestitadelbebe.es Take a look at this website. You can see there's a search form in the front page, the "c00l" thing about it, is that once you click on the field ("¿Que Buscas?"), it pops up a list of "suggestions". Or categoryes about related stuff.
I'm trying to accomplish the same behaviour, but avoiding loadings (I already have the information to be shown beforehand). I believe it could be accomplished by CSS and hidden divs or bootstrap. The thing is, I do not know how to accomplish that. How to popup a floating box under the exact position of the input box.
Could someone give me an example? Thanks beforehand.
jquery html css twitter-bootstrap
asked Nov 21 at 15:10
Alissa Rosaddo
1
Welcome to SO. Please take a tour of the help centre to see how to ask a good question. We cannot help you if you do not provide any code - see how to create a Minimal, Complete, and Verifiable example - links to websites are only acceptable if you reproduce the problem in the question - this is meant to be a repository of information for future visitors and external links rot (or in your case would get fixed) so future users would not be able to see the original problem if the code is not in the question
– Pete
Nov 21 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 at 15:26
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm developing a website and per requeriments, there's one thing I can't manage to figure out the best way to implement.
https://www.lacestitadelbebe.es Take a look at this website. You can see there's a search form in the front page, the "c00l" thing about it, is that once you click on the field ("¿Que Buscas?"), it pops up a list of "suggestions". Or categoryes about related stuff.
I'm trying to accomplish the same behaviour, but avoiding loadings (I already have the information to be shown beforehand). I believe it could be accomplished by CSS and hidden divs or bootstrap. The thing is, I do not know how to accomplish that. How to popup a floating box under the exact position of the input box.
Could someone give me an example? Thanks beforehand.
jquery html css twitter-bootstrap
asked Nov 21 at 15:10
Alissa Rosaddo
1
I'm developing a website and per requeriments, there's one thing I can't manage to figure out the best way to implement.
https://www.lacestitadelbebe.es Take a look at this website. You can see there's a search form in the front page, the "c00l" thing about it, is that once you click on the field ("¿Que Buscas?"), it pops up a list of "suggestions". Or categoryes about related stuff.
I'm trying to accomplish the same behaviour, but avoiding loadings (I already have the information to be shown beforehand). I believe it could be accomplished by CSS and hidden divs or bootstrap. The thing is, I do not know how to accomplish that. How to popup a floating box under the exact position of the input box.
Could someone give me an example? Thanks beforehand.
jquery html css twitter-bootstrap
jquery html css twitter-bootstrap
asked Nov 21 at 15:10
Alissa Rosaddo
1
asked Nov 21 at 15:10
Alissa Rosaddo
1
asked Nov 21 at 15:10
Alissa Rosaddo
1
asked Nov 21 at 15:10
Alissa Rosaddo
1
asked Nov 21 at 15:10
Alissa Rosaddo
1
1
Welcome to SO. Please take a tour of the help centre to see how to ask a good question. We cannot help you if you do not provide any code - see how to create a Minimal, Complete, and Verifiable example - links to websites are only acceptable if you reproduce the problem in the question - this is meant to be a repository of information for future visitors and external links rot (or in your case would get fixed) so future users would not be able to see the original problem if the code is not in the question
– Pete
Nov 21 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 at 15:26
add a comment |
Welcome to SO. Please take a tour of the help centre to see how to ask a good question. We cannot help you if you do not provide any code - see how to create a Minimal, Complete, and Verifiable example - links to websites are only acceptable if you reproduce the problem in the question - this is meant to be a repository of information for future visitors and external links rot (or in your case would get fixed) so future users would not be able to see the original problem if the code is not in the question
– Pete
Nov 21 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 at 15:26
Welcome to SO. Please take a tour of the help centre to see how to ask a good question. We cannot help you if you do not provide any code - see how to create a Minimal, Complete, and Verifiable example - links to websites are only acceptable if you reproduce the problem in the question - this is meant to be a repository of information for future visitors and external links rot (or in your case would get fixed) so future users would not be able to see the original problem if the code is not in the question
– Pete
Nov 21 at 15:25
Welcome to SO. Please take a tour of the help centre to see how to ask a good question. We cannot help you if you do not provide any code - see how to create a Minimal, Complete, and Verifiable example - links to websites are only acceptable if you reproduce the problem in the question - this is meant to be a repository of information for future visitors and external links rot (or in your case would get fixed) so future users would not be able to see the original problem if the code is not in the question
– Pete
Nov 21 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 at 15:26
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 at 15:26
add a comment |
1 Answer
1
active
oldest
votes
up vote
-1
down vote
I used the free AJAX Autocomplete for jQuery library on a recent project and it works quite well:
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Since you know the values beforehand, you can use pre-specified values, look for the "Local lookup (no ajax):" example on the page linked above.
Example: See the search box in the top right corner: https://dosgames.com All of the values are known beforehand.
answered Nov 21 at 15:40
emmzee
33029
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
-1
down vote
I used the free AJAX Autocomplete for jQuery library on a recent project and it works quite well:
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Since you know the values beforehand, you can use pre-specified values, look for the "Local lookup (no ajax):" example on the page linked above.
Example: See the search box in the top right corner: https://dosgames.com All of the values are known beforehand.
answered Nov 21 at 15:40
emmzee
33029
add a comment |
up vote
-1
down vote
I used the free AJAX Autocomplete for jQuery library on a recent project and it works quite well:
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Since you know the values beforehand, you can use pre-specified values, look for the "Local lookup (no ajax):" example on the page linked above.
Example: See the search box in the top right corner: https://dosgames.com All of the values are known beforehand.
answered Nov 21 at 15:40
emmzee
33029
add a comment |
up vote
-1
down vote
up vote
-1
down vote
I used the free AJAX Autocomplete for jQuery library on a recent project and it works quite well:
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Since you know the values beforehand, you can use pre-specified values, look for the "Local lookup (no ajax):" example on the page linked above.
Example: See the search box in the top right corner: https://dosgames.com All of the values are known beforehand.
answered Nov 21 at 15:40
emmzee
33029
I used the free AJAX Autocomplete for jQuery library on a recent project and it works quite well:
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Since you know the values beforehand, you can use pre-specified values, look for the "Local lookup (no ajax):" example on the page linked above.
Example: See the search box in the top right corner: https://dosgames.com All of the values are known beforehand.
answered Nov 21 at 15:40
emmzee
33029
answered Nov 21 at 15:40
emmzee
33029
answered Nov 21 at 15:40
emmzee
33029
answered Nov 21 at 15:40
emmzee
33029
33029
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415013%2ffloating-box-under-input%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Welcome to SO. Please take a tour of the help centre to see how to ask a good question. We cannot help you if you do not provide any code - see how to create a Minimal, Complete, and Verifiable example - links to websites are only acceptable if you reproduce the problem in the question - this is meant to be a repository of information for future visitors and external links rot (or in your case would get fixed) so future users would not be able to see the original problem if the code is not in the question
– Pete
Nov 21 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 at 15:26