How can I have multiple independent search boxes on a single SharePoint 2013 page?  My scenario is this:

1. Search Box 1 is added to the master page

2. Search Box 2 is on a dedicated search page along with a search results web part.

Search Box 1 is the search box from the navigation section in the Snippets Gallery.  It is the smaller SharePoint search box.

Search Box 2 is a search web part added to a web part zone on the page.  It is also the large SharePoint search box.  

When on the dedicated search page, and a search term is entered into search box 2, the search term is "entered" in both search boxes.  The real issue, which totally breaks the experience, is that the same CSS is applied to both search boxes on the page.  So the smaller search box, search box 1, gets the CSS class ".ms-srch-sbLarge" dynamically applied to it.  Additionally, we noticed that the divs wrapping the search boxes both get the ID of "SearchBox1".  I have added a before and after image to illustrate the problem.  

5/9/2013 - 

I have some more information to add to this issue.  SearchBox2 is using a display template. The control_searchbox.js file associated with the display template correctly gets SearchBox2's control ID when the page is first rendered.  However, when a search term is entered in SearchBox2, rather than preserve the control ID it found on page load, control_searchbox.js  parses the DOM for a TemplateType of "control" and a TargetControlType of "searchbox".  It finds the first one it comes to, which is the one in the master page and overwrites SearchBox1 with it's own markup, which is targeted for SearchBox2.

Microsoft - this would seem to be a bug in SharePoint.  How can we get a fix for this?

• Edited by MarkInWashington Thursday, May 09, 2013 8:12 PM

We are also having this issue, and am looking for a solution.