Implementing a search bar

#1

As, hopefully, the last bit of feature creep for my tribute page, http://codepen.io/lair001/pen/OXRwPE, I am trying to incorporate a search bar into my navigation bar. I’ve got some html down:

  <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

I want this to take the user into a Google web search (it would be absurd to actually search a 1 page site). How do I do this?

#2

Perhaps this may help? It’s an older post, but anything I’m finding that’s more recent refers back to this.

stackoverflow.com/questions/13822927/how-can-i-add-a-google-search-box-to-my-website

#3

Your solution no longer works and the reason appears to be that Google changed its search URL to:

www.google.com/#q=[search query with spaces replaced by +'s]

method=“get” constructs a URL like this:

[website]$[name]=[form string with spaces replaced by +'s]

Therefore, in order to do this, I would need to find a way to make get include a # instead of a $ or find a way to modify the url that get generates. Maybe I’ll just use another search engine.

#4

Alright, I easily got it to work with Bing search. Never thought I’d ever send business Microsoft’s way. My final code follows. It may help someone in the future:

  <form class="navbar-form navbar-right" role="search" method="get" action="https://www.bing.com/search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search Web" name="q">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

If you wanted to implement a web search bar outside a navbar, I would start by omitting class=“navbar-form navbar-right”.