Custom Site Search HTML that uses google search?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Was hoping that somebody knows how to create a site search using HTML form and input, that would then use google search to search (the inputed term) but only for your sites specific domain. Such as "site:www.yourdomain.com contact info"

I am trying to get the html to redirect the user to this: <!-- http://www.google.com/search?q=site%3.... -->

I can't use the google site search "widget" code as the search box is a custom css and is built into the sites design.

I have seen this done, but I just can't seem to figure out how its done and I can't seem to find a tutorial :(
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
  • frustrated

Posted 8 years ago

  • 1
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Hey Jeremy! Try the code below:

<!--
<script src="http://code.jquery.com/jquery-latest....>
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#searchbutton').click(function(){
var sterm=$('#searchinput').val();
document.location="http://www.google.com/search?q="+sterm+" site:http://www.yourdomain.com";
});
});
</script>
<input type="text" id="searchinput" value="Your Query Here"></input>
<button id="searchbutton">Search</button>
-->


Kevin
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
Hmm...
Don't seem to be having any luck with it atm, will keep at it though ;)

This is the code I use for the form:
<!--
<form id="search">
<input type="text" class="search_input" value="Search..." id="searchinput" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" >
<input id="searchbutton" type="submit" class="search_submit" value="Go">
</form>
-->

This is the site where I am trying to implement this: www.beverleypaton.co.uk

This is where I have seen this done: www.dannychoo.com
The search bar in this site "seems" to just redirect to Google (site specific search) and append the inputted term.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Jeremy,
This may not be what you are looking for, however, Google has a nice page where you can easily customize and implement an HTML search box: http://www.google.com/cse/.
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
Thanks Brianna, I have solved the problem.
I was just in need for the ability to change the CSS of the search box, etc.
Which I have managed to now do :D
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
<!--
<form id="search" method="get" action="http://www.google.com/search">
<input type="text" class="search_input" name="q" maxlength="255" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" >
<input type="submit" class="search_submit" value="Go">
<input type="hidden" name="domains" value="www.beverleypaton.co.uk" />
<input style="visibility:hidden" type="radio" name="sitesearch" value="www.beverleypaton.co.uk" checked="checked" />
</form>
-->

I have no idea why that took me so long, its a pretty simple Google search of your own site, based on the inputted data. But of course its only as reliable as Google. It also can be customized to your own CSS :)

Thanks Kevin for the help ;)
See an example here