Gravatar for corrac@paragon-inc.com

Question by Cris Corra, Aug 6, 2014 8:53 AM

How can I have two separate search controls on one page?

I have an Omnibox that uses a TopFieldSuggestion item that redirects to a result page once the user has selected an item from the Omnibox valuelist. I also have a ResultsList that shows the latest articles and such. Both components call the .coveoForSitecore('init') method on the page, but it seems only the first component calling the init is loading.

-Cris Corra

*Update: here is an image showing the 3 components on one page: http://cl.ly/image/2i3P19412v2l/Windows7VSNET2013.png

**Update 2: init code samples (3 different search boxes/results lists on the same page)

1)

Coveo.$(function() {
    var options = @(Html.Raw(Model.GetJavaScriptInitializationOptions()));
    options["topFieldSuggestions"] = {
        omniboxSuggestionOptions: {
            onSelect: function (valueSelected, populateOmniBoxEventArgs) {
                window.location.href = "/guidelines#first=0&f:TopicSearchFacet=[" + valueSelected + "]";
            }
        }
    };
    Coveo.$('#guideSearchBox')
        .on("buildingQuery", function(e, args) {
            args.queryBuilder.advancedExpression.add('(' + '@(Html.Coveo().ToCoveoFieldName("contentitemtype"))' + '="Guidelines")')
        })
        .coveoForSitecore('init', options);
});

2)

Coveo.$(function() {
    if (!isOnSearchPage()) {
        var restEndpointUri = "/coveo/rest";
        Coveo.Rest.SearchEndpoint.endpoints.default = new Coveo.Rest.SearchEndpoint({
            restUri: restEndpointUri
        });
        Coveo.$('#mainSearchBox').coveo('initSearchBox', '/search');
    }
})

function isOnSearchPage() {
    return Coveo.$('#mainsearch').length > 0;
}

$(document).ready(function() {
    $('#searchDropdownBox').on("change", function() {
        var sval = $('#searchDropdownBox option:selected').val();
        if (sval != null && sval != "") {
            Coveo.$('#mainSearchBox').coveo('state', 'f:@(Html.Coveo().ToCoveoFieldName("ContentItemType"))', "[" + sval + "]");
        }
    });
});

3)

Coveo.$(function() {
    var options = @(Html.Raw(Model.GetJavaScriptInitializationOptions()));
    options.externalSources.push('ACC WordPress Blog');
    Coveo.$('#search-rfy').on("buildingQuery", function(e, args) {
        var exp = buildRFYQueryExpression();
        args.queryBuilder.advancedExpression.add(exp); 
        var ctIds = '("f53dd214-394c-402f-8fcb-928c795490ac","332172f7-e818-41a0-976e-9ab92513cae5")';
        args.queryBuilder.advancedExpression.add('(' + '@(Html.Coveo().ToCoveoFieldName("ClinicalTopicComputedIds"))' + '=' + ctIds + ')')
    })
    .on('afterInitialization', function(e){
        Coveo.$('.CoveoSort').eq(0).coveo('select'); // 0 index is 'relevancy'
    })
    .coveoForSitecore('init', options);
});

**END Update 2

1 Reply
Gravatar for vseguin@coveo.com

Answer by Vincent Séguin, Aug 6, 2014 5:36 PM

Hi Cris,

The topFieldSuggestion component shouldn't call the coveoForSitecore init method. It should call the 'initSearchBox' method. Something like this :

Coveo.$('#mySearchox').coveo('initSearchBox', 'myUrl');
Gravatar for corrac@paragon-inc.com

Comment by Cris Corra, Aug 7, 2014 9:13 AM

Actually, I have 3 components total. The global search box (with NO topFieldSuggestion) which is initialized as you state above. A small resultslist with no facets/searchbox. And a omnibox which uses a TopFIeldSuggestion to provide a show-as-you-type list from the omnibox…once a user clicks an item, they are redirected to another page, passing the selection in the url.

I've updated my original post with an image showing the 3 components. -Cris

Gravatar for vseguin@coveo.com

Comment by Vincent Séguin, Aug 7, 2014 1:28 PM

Oh i see! But pretty sure the omnibox with the TopFieldSuggestion should be initialized with the initSearchBox as well :)

Gravatar for corrac@paragon-inc.com

Comment by Cris Corra, Aug 19, 2014 11:18 AM

Using "intiSearchBox" for the omnibox does not work. I have the global search box using "initSearchBox", could that be an issue having 2 using the same init call? The boxes are named differently.

Gravatar for glaporte@coveo.com

Comment by Gregory Laporte, Aug 19, 2014 11:55 AM

Can you provide the code for the 3 initialization parts?

Gravatar for corrac@paragon-inc.com

Comment by Cris Corra, Aug 21, 2014 10:32 AM

I have updated my original post with the code samples. Thanks!

Gravatar for richard.stokes@medica.com

Comment by mnrichardstokes, Nov 25, 2014 1:01 PM

Can you include the solution for this in the answers? I need to have multiple controls on the same page for our Intranet (e.g. New Employees, Anniversaries, etc) and am running into the same problem where only the first control is displayed.

Gravatar for slangevin@coveo.com

Comment by Simon, Nov 25, 2014 1:41 PM

The solution of the client was to use the .coveo() jQuery extension on each control: https://developers.coveo.com/display/JsSearch/jQuery+Extension

In the question above, you can see that Cris was trying to use .CoveoForSitecore() multiple times, which is not supported. As of September 2014, you can use .CoveoForSitecore() for the full page load and also for the standalone search box (no official documentation on this yet but it will come)

Hope it helps.
Simon

Ask a question