close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Search Box inline on top of page

Thread began 1/13/2016 4:31 pm by Charles | Last modified 1/26/2016 7:07 pm by Ray Borduin | 447 views | 12 replies |

Charles

Search Box inline on top of page

Through Datassist, I generated and have products_results and _details.php working well. DA also generated a Search box that works fine and generates the desired results at products_results.php, but my company wants a single Search box at the top right of every page like you see in the attached mockup.
So is there a simple way to modify the attached products_search.php code so that it Searches both 'Product_Name' and 'Category' in one small Search box top right of every page and yields results just like you see when you click the 'Search' button at http://outofchaos.net/gsc/www/products_search.php
That's the goal and I'd appreciate any guidance or suggestions. Thank you.

Sign in to reply to this post

Ray BorduinWebAssist

Yes... you can remove one of the two fields and then update the results page to use a keyword search across multiple columns. Then it would just be a matter of adding the form with the single text element to the template or all of the pages where you want it.

Sign in to reply to this post

Charles

If you could help/suggest the specific changes I'd need to make to the Search and Results pages, I created a dedicated products_results-search.php attached that responds to the products_search.php also attached but I'm not sure how to make the modifications you suggest so we'd have a single search box for Product_Name and Category that produces the combined result and fits neatly top right of the site's pages.

Sign in to reply to this post

Ray BorduinWebAssist

update lines 17-19 of the results page to:

$KeyArr1 = array("Product_Name", "category.Category");

//comparison list additions
$WADbSearch1->keywordComparison($KeyArr1,"".((isset($_GET["Product_Name"]))?$_GET["Product_Name"]:"") ."","WHERE","Includes",",%20","%20","%22","%22",0);



Then just delete the category row from your search page and delete the line that refers to it a couple of rows down on the results page since they aren't needed any more.

Sign in to reply to this post

Charles

Thank you! - the Search is producing the right results with the code you outlined. So the last bit of input/help I'd appreciate: what approach would you suggest to tucking this Search Box/Form into the top right of the page design like you see in the attached design mockup? Should I try and iFrame it or create some kind of Container Div and transplant the Search page code? What would you suggest or how would you yourself approach it? I can modify CSS and change the button - just not sure the best way to physically place it up there.

Sign in to reply to this post

Ray BorduinWebAssist

Definitely no need for an iframe. Just copy the form, input field, and button into a div positioned where you want it.

Sign in to reply to this post

Charles

Can you tell me what lines of the attached products_search.php you mean when you say, "Just copy the form, input field, and button?" Just not sure if the calls to the JS files need to be included in what you suggest. Thanks for your help.

Sign in to reply to this post

Ray BorduinWebAssist

None of the other code is necessary for it to function. Really the only thing the results page depends on is that the form action points to the results page, and the input field and form button names stay the same. Other than that they can be moved anywhere without effecting functionality.

Sign in to reply to this post

Charles

I'm close. Inserted the form code in an <aside> called 'search' and it works. Just could use your help with a couple of format issues - see URL and attached file below:
1> Want to move the search box and button to top right of page just to the right of the phone# and in line with it like the attached mockup
2> Can't see where I can change the style/color of the search button or maybe even use an image
Any suggestions you have here would be much appreciated. Thank you

Sign in to reply to this post

Ray BorduinWebAssist

You can move the search form over by adding css like:

#search {
text-align: right;
margin-right: 60px;
}

You can change the image from <input type="submit" to <input type="image" and then specify an image source.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...