Add Google to your Bootstrap Search Bar
Start with a Bootstrap document and the default (light) or inverse (dark) navbar. Your navbar code should look something like this:
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">XYZ Company</a></div>
<!-- add menu items-->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li></ul>
<!-- ADD SEARCH FORM HERE -->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</nav>How do I make my search bar functional?
Generic search forms in templates are just for show. They don't actually DO anything until you connect them to a bonafide search engine — either a scripted one of your own making or a 3rd party service.
Assuming your site is not dynamically driven with server-side code and content stored in a database, building your own search engine is out of the question. Static HTML sites must rely on 3rd party search engines such as Google.
NOTE: For best results, your site must be fully indexed by Google. It often takes 3-4 weeks or more for Google to find and fully index new websites.
How can I get Google to index my new website sooner?
You can help escalate the process by creating an XML Sitemap and uploading it to your server's root folder. Then submit the sitemap URL to Google through your Google Webmaster Tools Account. Full site indexing still requires several days or weeks. So be patient.
Google Search Code:
<script>
//GOOGLE SEARCH
//Enter domain of site to search
var domainroot="example.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="SEARCH" />
</form>On line 4, change the domainroot="example.com" to your website's actual domain (i.e. www.yourdomain.com or yourdomain.com). Use whichever produces the best results on Google. If unsure, open your browser and type site:www.yourdomain.com in the address bar. Hit Enter/Go. If you don't see any results, try it without the www prefix.
By now you're probably asking yourself "How do I combine Google's code with what I already have?"
It's simple. Starting on line 19, add Google's <script> above the form tag. Make other substitutions as shown below.
<!-- ADD SEARCH FORM HERE -->
<script>
//GOOGLE SEARCH
//Enter domain of site to search.
var domainroot="example.com"
function Gsitesearch(curobj){ curobj.q.value="site:"+domainroot+" "+curobj.qfront.value }
</script>
<form class="search navbar-form navbar-right" action="http://www.google.com/search" method="get"role="search" onSubmit="Gsitesearch(this)">
<div class="input-group"> <input name="q" type="hidden" />
<input class="form-control" name="qfront" type="search" required class="searchField" placeholder="Google Site Search" maxlength="50"/>
<span class="input-group-btn"> <button type="submit" class="search-button btn btn-primary"> <span class="glyphicon glyphicon-search"></span> </button> </span>
</div>
</form>
And there you have it. A working Search Bar made with Bootstrap and Google Search Engine. We hope you enjoyed this brief tutorial.
