Gravatar for daniel.reedy@tcw.com

Question by Daniel Reedy, Apr 16, 2015 10:28 AM

SearchBox Fails for IE

We are integrating Coveo for our intranet. The web forms layout for our intranet contains one static form, and 2 actions: Site Search (Coveo) and People Search (proprietary app).

If I trigger the Site Search with the Site Search button, it works fine; however, if I just press from the Site Search text box, it fires the click event which is bound to the People Search. That's the bug.

This works fine in Chrome, so I think this is because IE does not support the "form" attribute of the CoveoQueryBox:

If you visit "The form Attribute" section at http://www.w3schools.com/html/htmlformattributes.asp, you will see that IE doesn't support this attribute.

So, what is the work-around?

2 Replies
Gravatar for daniel.reedy@tcw.com

Answer by Daniel Reedy, Apr 16, 2015 11:09 AM

I have fixed this problem. The solution was to explicitly bind the keypress event to this function, and then prevent the default form submission from subsequently firing.

function executeSearch(e) {
    if (e.which == 13)  // enter
    {
        Coveo.$('#SearchBox').find("input.CoveoQueryBox").coveo('executeQuery');
        e.preventDefault();
    }
}
Gravatar for daniel.reedy@tcw.com

Comment by Daniel Reedy, Apr 16, 2015 2:45 PM

I'm not sure why the downvote. This may not be elegant, but it triages the problem. Since it is explicit, it is somewhat self-documenting. Is there another way?

Gravatar for olamothe@coveo.com

Answer by olamothe, Apr 16, 2015 10:39 AM

The problem comes from the fact that when there is only 1 input inside a form, the browser will automatically submit the form when you press enter in the input. The form attribute that we add on the input is there to counter this, but you're right that older IE version do not support this attribute.

A workaround would be to insert another hidden input anywhere inside the form that does nothing so that it doesn't auto submit the form.

Note that the input needs to be hidden with css (display: none, for example) and not type='hidden' for it to work reliably

Gravatar for daniel.reedy@tcw.com

Comment by Daniel Reedy, Apr 16, 2015 10:46 AM

That did not work.

Gravatar for olamothe@coveo.com

Comment by olamothe, Apr 16, 2015 11:12 AM

It's a proposed workaround by many people on SO that i've personally seen work. Don't know why it's not working in your case. Did you add a input type hidden ? I'm pretty sure it won't work with that. I meant a hidden input with css display:none. Sorry if it wasn't clear, I'll update my original answers. http://stackoverflow.com/a/1370030 http://stackoverflow.com/a/1370314

Gravatar for daniel.reedy@tcw.com

Comment by Daniel Reedy, Apr 16, 2015 2:43 PM

Yes, I added a hidden element.

I understand that it is a solution for some scenarios, but it didn't work for me. Thank you for your time!

Ask a question