search box help
4 posts by 3 authors in: Forums > CMS Builder
Last Post: July 18, 2008 (RSS)
By rentittoday - July 17, 2008
Hello,
We are trying to get our website up and running and the first step we want to accomplish is getting our search box to function and I am totally lost as to how to even begin.
We have about 12 different categories in our CMS builder (vehicles, construction equipment, etc, etc)
Our search function has a keyword search and a category drop down box.
We want the user to be able to search a specific category (ex. vehicles) or search All Categories. How do you set this up?
If the user selects a category, we would like for the search results to be displayed on a page dedicated to that category ( ex. The user chooses vehicles in the category drop down, the results should display on the vehicles page.) If they choose All categories it will be a generic page.
The only major difference from page to page of the category results is a header graphic and a search box that is specific to that category.
I have the ATVs and DirtBikes page laid out, so if you click on that category button on the right you can better see what I mean.
Is it possible just to have the search include a different header file and search box dependent on what they choose from the dropdown? If so, how would i set that up?
Here is the website that I am trying to get working, if it will help.
(http://rentittoday.com/portal_page_2.html)
Thanks for all your help!
We are trying to get our website up and running and the first step we want to accomplish is getting our search box to function and I am totally lost as to how to even begin.
We have about 12 different categories in our CMS builder (vehicles, construction equipment, etc, etc)
Our search function has a keyword search and a category drop down box.
We want the user to be able to search a specific category (ex. vehicles) or search All Categories. How do you set this up?
If the user selects a category, we would like for the search results to be displayed on a page dedicated to that category ( ex. The user chooses vehicles in the category drop down, the results should display on the vehicles page.) If they choose All categories it will be a generic page.
The only major difference from page to page of the category results is a header graphic and a search box that is specific to that category.
I have the ATVs and DirtBikes page laid out, so if you click on that category button on the right you can better see what I mean.
Is it possible just to have the search include a different header file and search box dependent on what they choose from the dropdown? If so, how would i set that up?
Here is the website that I am trying to get working, if it will help.
(http://rentittoday.com/portal_page_2.html)
Thanks for all your help!
Jason Glass
Re: [rentittoday] search box help
By Kenny - July 17, 2008
Here's one we used that is like what you are trying to produce:
<form name="form1">
<p style="margin-top: 0; margin-bottom: 0" align="right"><font face="Arial">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.internationallibrary.com/products/index.php">Choose a product category</option>
<option value="http://www.internationallibrary.com/products/index.php?category=end%20panels">End Panels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=wood%20shelving">Wood Shelving</option>
<option value="http://www.internationallibrary.com/products/index.php?category=leg%20based%20tables">Leg Based Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=display%20furniture">Display Furniture</option>
<option value="http://www.internationallibrary.com/products/index.php?category=reading%20tables">Reading Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=study%20carrels">Study Carrels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=book%20trucks">Book Trucks</option>
</select></font><font size="2" face="Arial"> </font><font face="Arial">
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"></font></p>
</form>
<form name="form1">
<p style="margin-top: 0; margin-bottom: 0" align="right"><font face="Arial">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.internationallibrary.com/products/index.php">Choose a product category</option>
<option value="http://www.internationallibrary.com/products/index.php?category=end%20panels">End Panels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=wood%20shelving">Wood Shelving</option>
<option value="http://www.internationallibrary.com/products/index.php?category=leg%20based%20tables">Leg Based Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=display%20furniture">Display Furniture</option>
<option value="http://www.internationallibrary.com/products/index.php?category=reading%20tables">Reading Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=study%20carrels">Study Carrels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=book%20trucks">Book Trucks</option>
</select></font><font size="2" face="Arial"> </font><font face="Arial">
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"></font></p>
</form>
Re: [rentittoday] search box help
By Dave - July 18, 2008
Hi rentittoday,
Just a heads up, what you want to do is pretty advanced so it might require some javascript and/or basic php.
The first step is to complete a mockup design of how you want each of the search results pages to look.
Next is to get a basic search page for a single category working. You can find docs on that here: http://www.interactivetools.com/docs/cmsbuilder/viewer_search.html
Next, you could use a javascript pulldown as sagentic suggests to jump between search engines or pass a different section 'tablename'.
And finally we have a multi table search function you have use to return results from multiple tables/sections. Another way to do that is with design having tabs the user can click through to get results from different 'categories'.
Start with the mockup and search results page and the basic search engine. Let me know when you get that far and we'll point you in the right direction for the next step.
Hope that helps!
Just a heads up, what you want to do is pretty advanced so it might require some javascript and/or basic php.
The first step is to complete a mockup design of how you want each of the search results pages to look.
Next is to get a basic search page for a single category working. You can find docs on that here: http://www.interactivetools.com/docs/cmsbuilder/viewer_search.html
Next, you could use a javascript pulldown as sagentic suggests to jump between search engines or pass a different section 'tablename'.
And finally we have a multi table search function you have use to return results from multiple tables/sections. Another way to do that is with design having tabs the user can click through to get results from different 'categories'.
Start with the mockup and search results page and the basic search engine. Let me know when you get that far and we'll point you in the right direction for the next step.
Hope that helps!
Dave Edis - Senior Developer
interactivetools.com
interactivetools.com
Re: [sagentic] search box help
By Kenny - July 18, 2008
Good point Dave - you do need some javascript!
I didn't copy far enough on the code we used. It should be:
<form name="form1">
<p style="margin-top: 0; margin-bottom: 0" align="right"><font face="Arial">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.internationallibrary.com/products/index.php">Choose a product category</option>
<option value="http://www.internationallibrary.com/products/index.php?category=end%20panels">End Panels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=wood%20shelving">Wood Shelving</option>
<option value="http://www.internationallibrary.com/products/index.php?category=leg%20based%20tables">Leg Based Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=display%20furniture">Display Furniture</option>
<option value="http://www.internationallibrary.com/products/index.php?category=reading%20tables">Reading Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=study%20carrels">Study Carrels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=book%20trucks">Book Trucks</option>
</select></font><font size="2" face="Arial"> </font><font face="Arial">
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"></font></p>
</form>
<script type="text/javascript">
function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}
function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
</script>
To see it in action, it is on every page of http://www.internationallibrary.com
I didn't copy far enough on the code we used. It should be:
<form name="form1">
<p style="margin-top: 0; margin-bottom: 0" align="right"><font face="Arial">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.internationallibrary.com/products/index.php">Choose a product category</option>
<option value="http://www.internationallibrary.com/products/index.php?category=end%20panels">End Panels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=wood%20shelving">Wood Shelving</option>
<option value="http://www.internationallibrary.com/products/index.php?category=leg%20based%20tables">Leg Based Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=display%20furniture">Display Furniture</option>
<option value="http://www.internationallibrary.com/products/index.php?category=reading%20tables">Reading Tables</option>
<option value="http://www.internationallibrary.com/products/index.php?category=study%20carrels">Study Carrels</option>
<option value="http://www.internationallibrary.com/products/index.php?category=book%20trucks">Book Trucks</option>
</select></font><font size="2" face="Arial"> </font><font face="Arial">
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"></font></p>
</form>
<script type="text/javascript">
function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}
function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
</script>
To see it in action, it is on every page of http://www.internationallibrary.com