Adding a clear/reset button to search fields

API & Customization
1

Has anyone tried to add a clear or reset button inside the knack search fields? I've made a few jquery attempts but to no avail. Would love to hear if someone else has successfully done this!

2

We’ve now added the “reset” functionality to Table, List, Map, Search and Report child table views. Easily reset your current search and start again!

3

You are welcome! I included a font-awesome icon with the clear link, so just include that library and it will look nicer (this includes floating the clear search link to the right). I also didn't include any CSS, but I assume you can style it in a way that works for you.

But for those who want a quick solution, here is the rest:

In the head:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Styles:

div.current-search {
 	border: 1px solid #DCD8AF;
  	background-color: #FFFDE7;
  	padding: 4px 8px;
  	font-size: 12px;
  	margin: 15px;
}
a#current-search-clear {
 	float: right; 
  	border: 0;
  	margin: 0;
  	padding: 0;
}

4

Thank you Benjamin!

5

Here is a temporary workaround until Knack builds the feature in. This puts a box below the search box that shows the current search and a clear link that dismisses it, but it keeps other filters. I hope it helps.

$(document).on('knack-view-render.view_<your-view>', function(event, view, data) {

    if ($('form.table-keyword-search input').val() != '') {
  	        var cursearchterm = $('form.table-keyword-search input').val();
	$('&lt;div class="current-search"&gt;&lt;a href="#" id="current-search-clear"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Clear Search&lt;/a&gt;Showing search results for "&lt;i&gt;'+cursearchterm+'&lt;/i&gt;"&lt;/div&gt;').insertAfter('form.table-keyword-search');
    }

    $('#current-search-clear').click(function(e) {
	        e.preventDefault();
	        $('form.table-keyword-search input').val('');
	        $('form.table-keyword-search').submit();
     });



});

Benjamin

6

I'm talking about a "search by keyword" field for a table. I see a search button, but no reset, unless I erase the text in the input and hit search again, essentially searching for nothing. Unless I'm missing something?

7

Our search view has the “reset” link after an initial search. Where are you specifically looking to add the link?

8

I would like to see this functionality too. It's a bit of a usability issue telling people to research for nothing. It would be preferable to have as a baseline feature.