why is my search bar not working?

[higgsyd]

If you go here:

http://ancestry.higgsy.co.uk/

the search works

If you go to my dev version here:

http://v38.ancestry.higgsy.co.uk/

it doesn't work.  I think the first one works by passing the search term to a google search.  The second one I got by inserting it from the DW Bootstrap Insert panel (I hope the nice Mr Osgood will not harass me for that!) What else do I need to add to the second one to make it work?  I have searched for the answer but all the tutorials I look at seem to concentrate on using CSS to format it, not tell me how it actually works - many thanks

[Jon Fritz]

The Bootstrap search field you get from the templates available in DW don't actually "do" anything. They're just dummy html forms. They're not attached to anything until you add an action attribute and link to a form processing script.

Your working form...

<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">

<input name="q" type="hidden"/>

<input name="qfront" type="text" style="width: 180px"/>

<input type="submit" value="Search"/>

<br/>

</form>

The Bootstrap placeholder form...

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>


If you use the same action, inputs and names, the new form should work like the old one did.

[Nancy OShea · Accepted solution]

I wrote a tutorial on this a while back.  But Google wants everyone to use a custom search API now.

Add Google to your Bootstrap Search Bar

Edited Nov 2020:  Use this - https://developers.google.com/custom-search/v1/overview

[higgsyd]

Thanks everyone, it is now working

[dougcomz]

Nancy - The Google search bar works great! Thank you. But I would like to use a graphic instead of the word SEARCH. I've tried several ways to do this but can't find one that works. Here's my adaption to your framework:

<script>
var domainroot="westsideobserver.com"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form class="search" action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<input name="q" type="hidden" />
<input name="qfront" type="search" required class="searchField" placeholder="Google Site Search" maxlength="50"/>
<input type="submit" class="search-button" value="" />
</form>
</div>

Thanks again -d

[Nancy OShea]

Doug,

This discussion is outdated.  As I said in 2018, Google deprecated the old Gsitesearch feature. DO NOT USE IT in 2020.

Go to Google Developers and create your unique JSON Search ID.  Then obtain your unique key to use with Google's new & improved search engine API.  The cost is free for 100 searches per day.  Additional search requests cost $5 per 1000 queries, up to 10k queries per day.

https://developers.google.com/custom-search/v1/overview

Another search engine option is Freefind.com.  Free search has ads, paid search has no ads.

[dougcomz]

Thanks Nancy!