floating-box under- input
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 '18 at 15:10
Alissa RosaddoAlissa Rosaddo
1
add a comment |
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 '18 at 15:10
Alissa RosaddoAlissa 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 '18 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 '18 at 15:26
add a comment |
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 '18 at 15:10
Alissa RosaddoAlissa 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 '18 at 15:10
Alissa RosaddoAlissa Rosaddo
1
asked Nov 21 '18 at 15:10
Alissa RosaddoAlissa Rosaddo
1
asked Nov 21 '18 at 15:10
Alissa RosaddoAlissa Rosaddo
1
asked Nov 21 '18 at 15:10
Alissa RosaddoAlissa Rosaddo
1
asked Nov 21 '18 at 15:10
Alissa RosaddoAlissa 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 '18 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 '18 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 '18 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 '18 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 '18 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 '18 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 '18 at 15:26
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 '18 at 15:26
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 15:40
emmzeeemmzee
340211
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 15:40
emmzeeemmzee
340211
add a comment |
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 '18 at 15:40
emmzeeemmzee
340211
add a comment |
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 '18 at 15:40
emmzeeemmzee
340211
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 '18 at 15:40
emmzeeemmzee
340211
answered Nov 21 '18 at 15:40
emmzeeemmzee
340211
answered Nov 21 '18 at 15:40
emmzeeemmzee
340211
answered Nov 21 '18 at 15:40
emmzeeemmzee
340211
340211
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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 '18 at 15:25
have a look at autocomplete plugins - jquery ui do a decent one
– Pete
Nov 21 '18 at 15:26