Gravatar for abuteau@coveo.com

Question by abuteau, Jul 4, 2014 5:45 PM

Having two similar searchbox on the same page pointing on the same JS Search Instance

Hi,

What's the best way to have two search page pointing on the same Js Search Instance in a page.

I suppose I could just create a dumb box and call the

$(selector).coveo('executeQuery') 

on search click ?

But I'll be a little bit bad since I won"t have omnibox options, etc.

3 Replies
Gravatar for glaporte@coveo.com

Answer by Gregory Laporte, Jul 9, 2014 3:40 PM

Hi, in your case, I would suggest a different method. Reloading the page can cause flicking and lead to a poor user experience. Also, that could populate the analytics with a lot of useless firstSearch events.

What I would suggest is to create a division over the full search page with your no results page markup and create a CoveoSearchBox there (class="CoveoSearchBox" or separated queryBox and searchButton). As stated there, it is possible to initialize content that is outside of the CoveoSearchInterface division. Both query boxes are going to be synchronized and will be available to use independently.

Once that done, all that remains is hooking on the right event to capture no-results event. This event is documented on that page.

Basically, your code could look like:

$('.CoveoSearchInterface').on('noResults', function(e, args) {
  $('#noresultsection').show();
  $('.CoveoSearchInterface').hide();
};
$('.CoveoSearchInterface').on('querySuccess', function(e, args) {
  if(args.results.results.length) > 0 {
    $('.CoveoSearchInterface').show();
    $('#noresultsection').hide();
  }
}
Gravatar for abuteau@coveo.com

Comment by abuteau, Jul 9, 2014 4:29 PM

Done. Much quicker thanks greg ! The only problem I got is that the search box is called twice on DiYouMean results

Gravatar for olamothe@coveo.com

Answer by olamothe, Jul 4, 2014 6:08 PM

"I suppose I could just create a dumb box [...]"

I'm guessing you want to do something like this ?

Gravatar for abuteau@coveo.com

Comment by abuteau, Jul 7, 2014 8:35 AM

Will do it ;)

Gravatar for abuteau@coveo.com

Answer by abuteau, Jul 8, 2014 9:53 AM

Actually what I had to do is to implement an other searchbox(with a different style/css) on a page where there is already a searchbox at the top. The two had to search on the same JSInstance.

The only problem was that it was a special page for a query with no result. On no result I would override the default search result template with JQuery to render a special no result template(how to do better query, etc.). So, the searchbox was not renderred when I added or replaced html to the page.

The solution was to implement an HTML Input text and submit button. I got the query in the input text on submit and trig a new search which will reload the page thus refresh the page.

                $(document).ready(function getSearchValue() {
                    $('#noresultsearch').click(function () {
                        var value = $('#noresultinput').val();
                        Coveo.$("#search").coveo('state', 'q', value);
                        Coveo.$('#search').coveo('executeQuery');
                        window.location.reload();
                    });
                });
Ask a question