Turn off 'order' within header row

I have a header row that is made up of a heading and an input search box.

I want to be able to click into the input box and enter search criteria. Whenever i click the box, it automatically sorts the column.

The column does need to be sorted and this behaviour is fine. All i want to do is to turn the sorting off when i click the input box.

I've played around with the off event. I.e. $('#datatable').off( 'order.dt'); or $('#datatable').off( 'order');

I've also tried to use event.stopPropagation()

So far, I can't get this to work.

Any ideas?

Lynd