[howto] Create an advanced search on your site

Kjeld · 2010-03-10 11:08:31

UPDATE:

This thread explains how to make an advanced search, offering visitors search options for both sections and categories. You can use both pull down menus and radio buttons. See the descriptions in the next posts in this thread.

I renamed the thread to Create an advanced search on your site to make it better reflect the new contents.

Original Question: (Please ignore!)

I would like to give visitors the option to select the section they want to search in

1. There are three sections: Photography, Illustrations, Maps. With my search form, I would like to have a popup form like this:

<select>
<option value ="photography" selected>Photography</option>
<option value ="illustrations">Illustrations</option>
<option value ="maps">Maps</option>
</select>

2. My search form looks like this:

<form method="get" action="<txp:site_url />[section-name]/">
<input type="text" name="q" value="" />
</form>

3. I would like to have the value selected in the popup form in #1 placed in the area marked as [section-name] in #2

~~I figure this must be very easy with javascript, or maybe using txp:variable, but I just can’t figure it out…~~

~~Is there anyone who can tell me the code that I need to use?~~

Last edited by Kjeld (2010-03-11 02:33:21)

Kjeld · 2010-03-10 12:07:02

Figured out one way to do this. Strange; I have been working on this for weeks and when I give up and ask for help it comes to me…

It is simple, too!

<form method="get" action="<txp:site_url />">
<input type="text" name="q" value="" />
<select name="s" onchange="submit(this.form);">
<option value="" selected="selected"> </option>
<option value="photography">Photography</option>
<option value="illustrations">Illustrations</option>
<option value="maps">Maps</option>
</select>
</form>

For a search for “Kobe” in “Photography” this gives you http://www.xxx.com/?q=kobe&s=photography

I prefer to have the clean urls, though. Like http://www.xxx.com/photography/?q=kobe

Any suggestions?

UPDATE:

I have taken a screen shot of this code in use for a section search. The code can also be used for category searches. See following posts.

Last edited by Kjeld (2010-03-11 00:30:52)

Kjeld · 2010-03-10 23:58:32

In response to a question by element in a separate thread. The above code also works for categories:

<form method="get" action="<txp:site_url />">
<input type="text" name="q" value="" />
<select name="c" onchange="submit(this.form);">
<option value="" selected="selected"> </option>
<option value="photography">Photography</option>
<option value="illustrations">Illustrations</option>
<option value="maps">Maps</option>
</select>
</form>

What is different in this code from that in the previous post is that after select name=, "s" (section) has been changed to "c" (category).

It will now search for the search term in the specified category only. For a search for “Kobe” in “Photography” this gives you:

http://www.xxx.com/?q=kobe&c=photography

If you want to direct the search to a specific section, like a section named search, add the name of the section after <txp:site_url />:

<txp:site_url />search/

Simple and elegant.

In my next post I will explain how to make the creation of the options in the pull down menu automatic.

Last edited by Kjeld (2010-03-11 00:36:04)

Kjeld · 2010-03-11 00:14:09

To make the creation of the options automatic in the pull down menu for categories (see previous post in this thread), replace the options with the following code:

<txp:category_list break="" parent="themes" exclude="themes" this_section="1" type="article">
<option value="<txp:category />"><txp:category title="1" /></option>
</txp:category_list>

The above code pulls categories from the category parent themes, and excludes the parent itself. I have set this_section= to "1" so it searches only articles in the current section. Set it to "0" if you want to search in all sections.

Warning: You still need the first empty option line to make sure the pull down menu activates when used, so make sure you leave it in. You can replace   with search in: or a similar phrase.

The complete code now looks like this:

<form method="get" action="<txp:site_url />">
<input type="text" name="q" value="" />
<select name="c" onchange="submit(this.form);">
<option value="" selected="selected"> </option>
<txp:category_list break="" parent="themes" exclude="themes" this_section="1" type="article">
<option value="<txp:category />"><txp:category title="1" /></option>
</txp:category_list>
</select>
</form>

Put the code in a form and you can easily call it with an output form whenever you need it.

I have taken a screen shot of this code in use for a section search (see second post in this thread).

Last edited by Kjeld (2010-03-11 02:23:14)

Kjeld · 2010-03-11 01:03:52

You can even combine a section and category search:

<form method="get" action="<txp:site_url />">
<input type="text" name="q" value="" />
<select name="s">
<option value="" selected="selected">select section</option>
<option value="photography">Photography</option>
<option value="illustrations">Illustrations</option>
<option value="maps">Maps</option>
</select>
<select name="c" onchange="submit(this.form);">
<option value="" selected="selected">select category</option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="bananas">Bananas</option>
</select>
</form>

The options below <select name="s"> are sections. The options below <select name="c"> are for categories.

Next to the search menu you will now have two pull down menus; one for selecting a section and one for selecting a category. The search only activates when the second pull down menu is used.

On the site I am working on, I have replaced <option value="" selected="selected">select section</option> with <option value="photography" selected="selected">select section</option>. This way, even if people don’t select a section, it automatically searches the photography section.

You now have a pretty spiffy advanced search!

Kjeld · 2010-03-11 02:00:12

You can also have radio buttons!

The following code creates a search input form with three radio buttons for sections and a pull down menu for categories. Textpattern rocks!

<form method="get" action="<txp:site_url />">
<input type="text" name="q" value="" />

<input type="radio" name="s" value="photography" checked> Photography
<input type="radio" name="s" value="illustrations"> Illustrations
<input type="radio" name="s" value="maps"> Maps

<select name="c">
<option value="" selected="selected">select category</option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="bananas">Bananas</option>
</select>

<input type="submit" value="search" /></form>

Above I have separated the code for the input box, radio buttons, pull down menu and submit form, so it is easier for you to understand. Naturally, you don’t need to separate the code on your site.

Last edited by Kjeld (2010-03-11 02:10:13)

uli · 2010-03-11 02:44:49

Thanks, Kjeld! :)

Kjeld wrote:

Textpattern rocks!

You’ll love it even more !

Kjeld · 2010-03-11 02:54:49

uli wrote:

Thanks, Kjeld! :)
You’ll love it even more !

Thanks for the thanks, and the links, uli. I actually looked at those tips in my search for making the advanced search work. Very nice! Are they your work?

Vide-Dressing · 2010-06-09 16:14:13

That was very helpfull and good to know ! thank you very much Kjeld

Kjeld · 2010-06-09 21:55:00

Vide-Dressing wrote:

That was very helpfull and good to know ! thank you very much Kjeld

You’re welcome. Inspired by uli’s work and an excellent article I found on creating filters I have greatly improved on the concept for a new site that I am building. As soon as it goes live in October, I will create a post describing the steps. It works great and takes txp search to a new level without needing to do any hacking.

HAC · 2011-05-06 17:29:54

Thanks for your sharing. Now I can set up an advanced search for my client.

Kjeld · 2011-05-06 22:54:33

Glad you found it helpful. See the final result of my efforts on meijishowa.com. Unfortunately, I haven’t had the time to sit down and create a post describing all the steps involved, but I hope you will find it helpful as a suggestion of what is possible.

Textpattern CMS

Textpattern CMS support forum

#1 2010-03-10 11:08:31

[howto] Create an advanced search on your site

#2 2010-03-10 12:07:02

Re: [howto] Create an advanced search on your site

#3 2010-03-10 23:58:32

Re: [howto] Create an advanced search on your site

#4 2010-03-11 00:14:09

Re: [howto] Create an advanced search on your site

#5 2010-03-11 01:03:52

Re: [howto] Create an advanced search on your site

#6 2010-03-11 02:00:12

Re: [howto] Create an advanced search on your site

#7 2010-03-11 02:44:49

Re: [howto] Create an advanced search on your site

#8 2010-03-11 02:54:49

Re: [howto] Create an advanced search on your site

#9 2010-06-09 16:14:13

Re: [howto] Create an advanced search on your site

#10 2010-06-09 21:55:00

Re: [howto] Create an advanced search on your site

#11 2011-05-06 17:29:54

Re: [howto] Create an advanced search on your site

#12 2011-05-06 22:54:33

Re: [howto] Create an advanced search on your site

Board footer