Searchbox Problem

<div class="top-bar">
<div class="top-bar-left">
<ul class="hnavbar">
<li><a href="../index.htm">Home</a></li>
<li><a href="../About/about.htm">About</a></li>
<li><a href="../Gallery/Gallery.htm">Gallery</a></li>
<li><a href="../Bookshop/Bookshop.htm">Book Shop </a></li>
</ul>
</div>
<div class="top-bar-right">
<div>
<input type="hidden" name="cx" value="partner-pub-4841837983041841:8250844882" />
<div class="input-group input-group-rounded">
<input class="input-group-field" type="search">
<div class="input-group-button">
<input type="submit" class="button secondary" value="Search">
</div>
</div>
</div

Sadly I find that once I put it online “I can’t do a search”.

I am assuming that something is missing such as some code to connect it to my website address.

Previously I used Google coding which was ;

<script async src=["https://cse.google.com/cse.js?cx=001916337835128462451:oov8x6vp58m"](https://cse.google.com/cse.js?cx=001916337835128462451:oov8x6vp58m)></script>
<div class="gcse-search"></div>

I have tried numerous ways to apply this and basically they all failed to give me what I want!

So I am hoping you will show me how!

This is a link to a page on my website:

http://www.thegardenersalmanac.co.uk/About/about.htm

This will hopefully allow you to try out the search box situation for yourself.

I look forward to your reply

Thanks in advance…Alex

Hi,

Please provide some details like your exact Foundation Sites version.

Also can you create a codepen so we can reproduce it in an isolated environment?

Can you also provide the JS code for your search feature?

I took a brief look and this is not a problem with Foundation Sites but the markup.

Your code is like this:

So it looks for an element with the class search and then toggles a class on an element with the class search-field. But both of these elements do not exist in the HTML. At least these classes can not be found. So the code is never triggered.

PS: You might want to remove the duplicate $(document).foundation(); line.

Hi Daniel

Thanks for getting back to me

Firstly, let me advise you that I am a complete 'Novice, and I am not quite sure what you need in the way of info but I will try!

Version=Foundation Version: 6.6.3

I used a modified version of the data on this page: https://get.foundation/sites/docs/top-bar.html

In terms of CSS & JS I was linked to Foundation’s Css &Js.apart from a few simple modifications I made such as Fonts, Background colours etc.

This is a copy of the source code I used:(I am not conversant with Codepen)

Sadly I find that once I put it online “I can’t do a search”.

I am assuming that something is missing such as some code to connect it to my website address.

Previously I used Google coding which was ;

I have tried numerous ways to apply this and basically they all failed to give me what I want!

So I am hoping you will show me how!

This is a link to a typical page on my website:

http://www.thegardenersalmanac.co.uk/About/about.htm

This will hopefully allow you to try out the search box situation for yourself.

I hope this info will be sufficient to allow you to diagnose my problem/s!

If not, do not hesitate in contacting me for any further information you may require

Alex

Please see my last comment, the needed classes do not exist. That is the problem. It is unrelated to Foundation Sites.

stackoverflow.com is s better place to get the needed solution with a detailed answer as I do not have so much time.

If I add the search and search-field classes the few lines of code toggle the class.

In general I see no further logic for the actual search.