Search with dropdown

[MO]

Hi,

I am trying to get a searchbox similar to this restaurant website – http://look-out.be/

So: dropdown for region, dropdown for kind of kitchen (french, asian etc) and keyword field.

I looked at the Custom fields, but that only works with products. Since I don’t have Woocommerce, how to proceed?

Thanks for your help!

[Ernest Marcinko]

Hi,

Custom fields does work with every post type (posts, pages, products, portforlio etc…), no need to have WooCommerce: https://codex.wordpress.org/Custom_Fields
They are basically extra information you can attach to an object (such as a restaurant).

Your setup depens on how the region and kitchen are defined – if they are taxonomy terms (similar to categories) you need the taxonomy term selectors.
If they are stored as custom fields, then you can create custom field selectors.

[MO]

Hi Ernest,

Both region and kithcen type are categories in this site.

Basically, I would like to have a dropdown with region, below that a dropdown with kitchen and below that a keyword field.

How should I proceed or isn’t that possible with this plugin?

Thanks!

[MO]

You cannot access this content.

[Ernest Marcinko]

Hi!

To display the selectors above the search bar, I suggest using the settings shortcode. It basically allows you to display the settings box above the search bar. In your case the post/page with both shortcodes would look like:

[html]
[wpdreams_asp_settings id=1 element='div']
[wpdreams_ajaxsearchpro id=1]
[/html]

The plugins main feature is a search bar, thus a search phrase is required, however there is a knowledge base article to make it work without any phrases: https://wp-dreams.com/knowledge-base/how-to-use-filters-only-and-hide-the-search-bar/
Just skip the Custom CSS part of that tutorial, since you want to display the search bar.

It does not matter how many restaurants you have, by default always 10 is displayed (its the results limit by default). You can of course increase that to a higher number if you want to on the General Options -> Behavior panel: http://i.imgur.com/9nDaAC0.png

[MO]

You cannot access this content.

[Ernest Marcinko]

Hi,

1. Have you applied the tweaks to allow empty phrases? I cannot see the changes. When I type in something, I’m getting a result: http://i.imgur.com/TsRg8gf.png

2-4. In this case, use the Two Column Shortcode instead of the search shortcode. Your final output should be:

[html]
[wpdreams_asp_settings id=1 element='div']
[wpdreams_ajaxsearchpro_two_column id=1 search_width=50 results_width=50 invert=0 element='div']
[/html]

This will display the settings on top and the results on the right side on 50% width.

How it’s done on that example:
In that example you linked I’m using column shortcodes, which are a feature of the that theme, but novadays 90% of the themes have them, probably yours as well. In that case the search shortcode on the left is put into a 1/3 column shortcode, and the results shortcode is put into a 2/3 column shortcode.

[html]
[one_third]
[wpdreams_asp_settings id=1 element='div']
[wpdreams_ajaxsearchpro id=1]
[one_third]
[two_third_last]
[wpdreams_ajaxsearchpro_results id=1 element='div']
[two_third_last]
[/html]

THIS IS JUST AN EXAMPLE! These column shortcodes might be different on your theme, or might not exist!
Check if your theme has similar column shortcodes and replace them if yes. You might be able to use them!

Also, if you have visual composer, you can also use the search shortcodes to position to a two column layout separately. It’s a bit easier to position that way, as it does not require coding knowledge.

3. It’s caused by the theme stylesheet, it sets the default color to brown on fieldsets. Use this custom CSS to fix that:

[html]fieldset.asp_custom_f * {
color: white;
}[/html]

[MO]

You cannot access this content.

[Ernest Marcinko]

1. I still cannot see the change to allow an empty phrase: http://i.imgur.com/PjwmEBF.png

If you cannot add it or need help (or it’s not working), just fill in the FTP and back-end login details and I will do that for you.

2. Because the value of the “Maak uw keuze…” select is “Maak uw keuze” – which is telling the search to filter the filed by “Maak uw keuze” string. You need an empty phrase there instead. So now you have this line in the custom field configuration (http://i.imgur.com/hlmVLRQ.png):

[code]Maak uw keuze||Maak uw keuze…**[/code]

change that to:

[code]||Maak uw keuze…**[/code]

for both custom fields. So there is nothing before the double lines on that first line. It will mean that no value is entered, thus matching anything.

[Author]

Posts