I have a page that allows a user to filter/search the content on that page by using keywords:
download bmml source – Wireframes created with Balsamiq Mockups
As the user types in the search box, the contents in the data table is filtered. At any point (as long as there's data in the data table), he can select multiple rows by checking the checkboxes and clicking one of the actions to perform that action on multiple rows.
Currently, if one removes the text in the search box, then the search results are "cleared" in the sense that the filters are removed and ALL rows are displayed.
Search generates urls like: http://site.com/blah/blah/blah/search/my-seach-terms
If the user visits http://site.com/blah/blah/blah/search/ or http://site.com/blah/blah/blah/ , then the filters are also removed and ALL rows are displayed.
I would now like to add a button/link somewhere, so that the user can click on it to explicitly clear the filtering and show ALL rows.
I am having a bit of a struggle trying to decide where to put it. I need it in a position that won't be easy to mistakenly click and a place that is visible so that the user knows "hey, I can clear the filtering and return to where I started".
Can any of you suggest a spot for the "clear search results link" that is easy to spot/recognize and also hard to accidentally click?
After a bit more research, I came across the search box in Windows Explorer:
Normal State (My search box looks almost identical to this):
When keywords are entered:
As can be seen, the magnifying glass turns into an "x" to clear the search box when keywords are entered. Is this a good idea? Do people get confused?
I think the down side of this approach is that it's hard for users without Javascript as they would be expecting a submit button to submit the query, and an "x" doesn't say "submit this search query".
And another one which is close to the results here: