Highlighted

why is my search bar not working?

Participant ,
Sep 19, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

 

Views

621

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

why is my search bar not working?

Participant ,
Sep 19, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

 

Views

622

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 19, 2018 0
Adobe Community Professional ,
Sep 19, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2018 1
Adobe Community Professional ,
Sep 19, 2018

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2018 2
Participant ,
Sep 22, 2018

Copy link to clipboard

Copied

Thanks everyone, it is now working

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 22, 2018 0
Community Beginner ,
Nov 10, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 10, 2020 0
Adobe Community Professional ,
Nov 10, 2020

Copy link to clipboard

Copied

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.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 10, 2020 0
dougcoms LATEST
Community Beginner ,
Nov 15, 2020

Copy link to clipboard

Copied

Thanks Nancy!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2020 0