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/Windows7_VS_NET2013.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
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');
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
Oh i see! But pretty sure the omnibox with the TopFieldSuggestion should be initialized with the initSearchBox as well :)
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.
Can you provide the code for the 3 initialization parts?
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.