Dynamically change content in SharePoint 2013 Search Snippet

Question

I have one function with one param and I have to get the data dynamically from NavDropdownListContainer and set it in the Search TextBox using JQuery or JavaScript.

Please find below the screenshot and css related to it.

SharePoint 2013 SearchBox

Help would be appreciated.

<div class="ms-floatLeft" id="SearchBox" name="Control">
    <div class="ms-srch-sbLarge ms-srch-sb-borderFocused" id="ctl00_ctl38_g_c60051d3_9564_459e_8a40_e91f8abf4dcf_csr_sboxdiv">
        <input title="Search Everything" class="ms-textLarge ms-srch-sbLarge-navWidth ms-srch-sb-prompt ms-helperText" id="ctl00_ctl38_g_c60051d3_9564_459e_8a40_e91f8abf4dcf_csr_sbox" accesskey="S" onkeydown="var ctl = $getClientControl(this);ctl.activateDefaultQuerySuggestionBehavior();" onkeypress="if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) { $getClientControl(this).search(this.value);return Srch.U.cancelEvent(event); }" onfocus="var ctl = $getClientControl(this);ctl.hidePrompt();ctl.setBorder(true);" onblur="var ctl = $getClientControl(this);ctl.showPrompt();ctl.setBorder(false);" type="text" maxlength="2048" value="" autocorrect="off" autocomplete="off">
        <a title="Navigation" class="ms-srch-sb-navLink ms-srch-sb-navLink-menuOpen" id="ctl00_ctl38_g_c60051d3_9564_459e_8a40_e91f8abf4dcf_csr_NavButton" onclick="$getClientControl(this).activateDefaultNavigationBehavior();return Srch.U.cancelEvent(event);" href="javascript: {}"> <img class="ms-srch-sbLarge-navImg" id="navImg" alt="Navigation" src="/_layouts/15/images/searchresultui.png?rev=23"> </a>
        <a title="Search" class="ms-srch-sb-searchLink" id="ctl00_ctl38_g_c60051d3_9564_459e_8a40_e91f8abf4dcf_csr_SearchLink" onclick="$getClientControl(this).search($get('ctl00_ctl38_g_c60051d3_9564_459e_8a40_e91f8abf4dcf_csr_sbox').value);" href="javascript: {}"> <img class="ms-srch-sbLarge-searchImg" id="searchImg" alt="Search" src="/_layouts/15/images/searchresultui.png?rev=23"> </a>
        <div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer">
            <div id="ctl00_ctl38_g_c60051d3_9564_459e_8a40_e91f8abf4dcf_csr_AutoCompList"></div>
        </div>
        <div class="ms-qSuggest-container ms-shadow" id="NavDropdownListContainer" style="display: block; visibility: visible; position: absolute;">
            <div class="ms-qSuggest-list" id="ctl00_ctl38_g_c60051d3_9564_459e_8a40_e91f8abf4dcf_csr_NavDropdownList" style="width: 498px;">
                <div class="ms-qSuggest-hListItem">Everything</div>
                <div class="ms-qSuggest-listItem">Videos</div>
                <div class="ms-qSuggest-listItem">People</div>
                <div class="ms-qSuggest-listItem">Conversations</div>
            </div>
        </div>
    </div>
</div>

fmourtaza fmourtaza · Accepted Answer · 2015-05-26T10:38:35

I modified code as follows in the "Control_Searchbox.html" which is located under Sites Settings > Web Designer Galleries > Master pages and page layouts > Display Templates > Search:

    //alert('Ready');
    var searchScope = GetUrlKeyValue("searchscope", false, location.href);
    //alert(searchScope);

    if(searchScope != ""){
        var navNodes = ctx.ClientControl.get_navigationNodes();
        //alert(navNodes);
        if (navNodes.length > 0) {
              var nodeName;
              var nodePromptString;
              var nodeUrl;

                for (var i = 0; i < navNodes.length; ++i) {
                    nodeName = navNodes[i].name;
                    nodePromptString = navNodes[i].promptString;
                    nodeUrl = navNodes[i].url;

                    //alert(nodeName + '/' + nodePromptString + '/' + nodeUrl + ' - ' + searchScope);

                    if(nodeName.toUpperCase() == searchScope.toUpperCase()){
                        ctx.ClientControl.set_resultsPageAddress(nodeUrl);             
                        prompt = nodePromptString;
                        break;
                    }
                }
        }
    }

Hence whenever you wanna access one of the results sources, you have to pass the querystring as

http://siteurl/Search/Seiten/default.aspx?searchscope=Everything

Complete Control_SearchBox.html

Dynamically change content in SharePoint 2013 Search Snippet

1 Answers