How to make a search function with dropdown?

up vote
1
down vote

favorite

I have a website with a lot of products I've made in Wordpress. To make it easy for my visitors, I would like to make a search function with dropdowns.

My idea is, that my visitors have to select some categories in some dropdowns, and eventually press a search button to then display products that matching, what the visitors had chosen.

These types of dropdowns I think are like thise: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

asked Nov 19 at 13:26

Oscar S.

New contributor

Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Nov 19 at 13:28

Minimum effort
– mplungjan
Nov 19 at 13:29

add a comment |

up vote
1
down vote

favorite

I have a website with a lot of products I've made in Wordpress. To make it easy for my visitors, I would like to make a search function with dropdowns.

My idea is, that my visitors have to select some categories in some dropdowns, and eventually press a search button to then display products that matching, what the visitors had chosen.

These types of dropdowns I think are like thise: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

asked Nov 19 at 13:26

Oscar S.

New contributor

Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Nov 19 at 13:28

Minimum effort
– mplungjan
Nov 19 at 13:29

add a comment |

up vote
1
down vote

favorite

I have a website with a lot of products I've made in Wordpress. To make it easy for my visitors, I would like to make a search function with dropdowns.

My idea is, that my visitors have to select some categories in some dropdowns, and eventually press a search button to then display products that matching, what the visitors had chosen.

These types of dropdowns I think are like thise: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

asked Nov 19 at 13:26

Oscar S.

New contributor

I have a website with a lot of products I've made in Wordpress. To make it easy for my visitors, I would like to make a search function with dropdowns.

My idea is, that my visitors have to select some categories in some dropdowns, and eventually press a search button to then display products that matching, what the visitors had chosen.

These types of dropdowns I think are like thise: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

javascript html wordpress filter webshop

asked Nov 19 at 13:26

Oscar S.

New contributor

asked Nov 19 at 13:26

Oscar S.

New contributor

asked Nov 19 at 13:26

Oscar S.

New contributor

asked Nov 19 at 13:26

Oscar S.

asked Nov 19 at 13:26

Oscar S.

New contributor

Oscar S. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Nov 19 at 13:28

Minimum effort
– mplungjan
Nov 19 at 13:29

add a comment |

Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Nov 19 at 13:28

Minimum effort
– mplungjan
Nov 19 at 13:29

Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a Minimal, Complete, and Verifiable example of your attempt, noting input and expected output.
– mplungjan
Nov 19 at 13:28

Minimum effort
– mplungjan
Nov 19 at 13:29

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

For that you need to create a custom dropdown and not select list. ALternatively you can use datalist

<form action="/action_page.php" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

</form>

answered Nov 19 at 13:38

brk

24.6k31939

Thanks for quick answer! So, now I know how to make the dropdowns, and I also know how to set it up, so it looks nice. I also know how to set it up, so it looks nice, but how can I transfer my visitors to the right place on my website?
– Oscar S.
Nov 19 at 13:45

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',
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
});

}
});

Oscar S. is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375654%2fhow-to-make-a-search-function-with-dropdown%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

For that you need to create a custom dropdown and not select list. ALternatively you can use datalist

<form action="/action_page.php" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

</form>

answered Nov 19 at 13:38

brk

24.6k31939

Thanks for quick answer! So, now I know how to make the dropdowns, and I also know how to set it up, so it looks nice. I also know how to set it up, so it looks nice, but how can I transfer my visitors to the right place on my website?
– Oscar S.
Nov 19 at 13:45

add a comment |

up vote
0
down vote

For that you need to create a custom dropdown and not select list. ALternatively you can use datalist

<form action="/action_page.php" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

</form>

answered Nov 19 at 13:38

brk

24.6k31939

Thanks for quick answer! So, now I know how to make the dropdowns, and I also know how to set it up, so it looks nice. I also know how to set it up, so it looks nice, but how can I transfer my visitors to the right place on my website?
– Oscar S.
Nov 19 at 13:45

add a comment |

up vote
0
down vote

For that you need to create a custom dropdown and not select list. ALternatively you can use datalist

<form action="/action_page.php" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

</form>

answered Nov 19 at 13:38

brk

24.6k31939

For that you need to create a custom dropdown and not select list. ALternatively you can use datalist

<form action="/action_page.php" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

</form>

<form action="/action_page.php" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

</form>

<form action="/action_page.php" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

</form>

answered Nov 19 at 13:38

brk

24.6k31939

answered Nov 19 at 13:38

brk

24.6k31939

answered Nov 19 at 13:38

brk

24.6k31939

answered Nov 19 at 13:38

brk

24.6k31939

Thanks for quick answer! So, now I know how to make the dropdowns, and I also know how to set it up, so it looks nice. I also know how to set it up, so it looks nice, but how can I transfer my visitors to the right place on my website?
– Oscar S.
Nov 19 at 13:45

add a comment |

Thanks for quick answer! So, now I know how to make the dropdowns, and I also know how to set it up, so it looks nice. I also know how to set it up, so it looks nice, but how can I transfer my visitors to the right place on my website?
– Oscar S.
Nov 19 at 13:45

Thanks for quick answer! So, now I know how to make the dropdowns, and I also know how to set it up, so it looks nice. I also know how to set it up, so it looks nice, but how can I transfer my visitors to the right place on my website?
– Oscar S.
Nov 19 at 13:45

add a comment |

Oscar S. is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Oscar S. is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg