Adding a clear/reset button to search fields

Completed

Comments

7 comments

  • Official comment
    Avatar
    Laura Theis

    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!

    Comment actions Permalink
  • Avatar
    Benjamin Costello

    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.

    0
    Comment actions Permalink
  • Avatar
    Brandon Griggs
    Our search view has the "reset" link after an initial search. Where are you specifically looking to add the link?

     

    0
    Comment actions Permalink
  • Avatar
    John Katez

    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?

    0
    Comment actions Permalink
  • Avatar
    Benjamin Costello

    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();
      		$('<div class="current-search"><a href="#" id="current-search-clear"><i class="fa fa-times"></i> Clear Search</a>Showing search results for "<i>'+cursearchterm+'</i>"</div>').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

    0
    Comment actions Permalink
  • Avatar
    John Katez

    Thank you Benjamin!

    0
    Comment actions Permalink
  • Avatar
    Benjamin Costello

    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;
    }

     

    1
    Comment actions Permalink

Please sign in to leave a comment.