HOWTO: Create a Custom Search Box

Paste the following into a custom HTML snap-in. The text box and search button can be customized by changing the appropriate attributes on the input tags. The default text can be changed by replacing the value in the first line of javascript.

<div id="searchArea">
   <input type="text"  id="customSearchInput">
   <input type="button" id="customSearchButton" value="Search">
</div>

<script type="text/javascript">

    // This script creates a "placeholder" in the search box until it receives focus. When it loses focus it will go back to
    // the default if nothing is entered.

    var defaultTerm = "Search Here..."
  
    $("#customSearchButton").click(function (e) {
        e.preventDefault();
        var strSearch = encodeURIComponent($("#customSearchInput").val());
        if (strSearch != defaultTerm && strSearch != "")
            window.open("/store/Search.aspx?SearchTerms=" + strSearch , "_parent");
    });

    $("#customSearchInput")
        .keydown( function(e) {
            if(e.keyCode == 13) {
                $("#customSearchButton").click();
                return false;
            }
        })
        .focus( function(){
            if($(this).val()==defaultTerm)
                $(this).val("");
        })
        .blur( function() {
            if($(this).val()=="")
                $(this).val(defaultTerm);
        })
        .val(defaultTerm);
</script>