Clear Search Component

Questions
1

Anyone know of a way to clear the text in the Search Component?  We use it to trigger an action. Once the user is “done”, I want the search box to be cleared so they can search for something else.

Any JS snippet that can do this?  Thanks!

2

Not sure if that would work, but it can be as simple as adding after your existing action, another to query the model containing search, with standard behavior. 

That should refresh all, including the search box

3

This has come up again… Users (our customers, because it is in our community) are annoyed that they have to select all, delete.  They think there should be an ‘x’ to clear the contents.  I was thinking maybe I could have a clear button that would clear the component text using JS or something.

Dave - thanks for the suggestion, but this is the search component which isn’t tied to a specific model.

4

This is similar - I think - to the issue to which I’ve answered posted here https://community.skuid.com/t/skuid-mobile-custom-field-renderer

I’d personally find such a feature to be extremely useful and neat and may well implement it myself when I have some spare time. Otherwise I do hope skuid themselves get to it soon!

5

this project seems particularly close to the functionality you’re looking for https://skorecky.github.io/Add-Clear/

6

Came back to bump this and see it has been marked as answered.  I am not skilled enough to implement the solutions posted above… can someone help walk me through it?  I created a snippet using the Add-Clear project code right above:


$(function(){ $(“input”).addClear(); }); // Example onClear option usage $(“input”).addClear({ onClear: function(){ alert(“call back!”); } });

I don’t know what snippet type to use, and the Search Component doesn’t have a Custom Field render option like a field does.  Help??

We really need this in several areas.


7

Me too on this please. The behaviour of the search box on a table is fine as is, because keeping the search term there shows that the table is filtered by that term. But the same doesn’t quite work in a nav bar. I’d like to see an “x” icon to clear the selection, and perhaps an option on search boxes to “clear search term after item selection”.

8

Bump?

The best option is to clear the search term after selecting a result. Salesforce Lightning Experience does this and it works well.

9

Solution to clear Search Component through a separate Button (“Clear”).
Add a custom action on the button to run a javascript snippet. 
Code for Snippet:
var obj = document.getElementById(“search”).getElementsByTagName(“input”)[0];
obj.value=“”;

10

This might help you - 

var models = skuid.model.getModelsList();var conditionsToDeactivate = ;

$.each(models,function(i,e){
    $.each(e.conditions,function(index,f){
        if (f.name !== null && (f.name.indexOf(‘_searchbox’) > -1 || f.name.indexOf(‘__autofilter’) > -1)){
            conditionsToDeactivate.push({model: e, index: index});
        }
    });
});

$.each(conditionsToDeactivate,function(){
    this.model.deactivateCondition(this.model.conditions[this.index]);
});

11

An idea has been posted for this.  Vote please!  :)  https://community.skuid.com/t/add-an-x-to-delete-the-contents-of-the-table-search-box

12

Just to let you know Abhi’s suggestion above worked for us. You need to replace the “search” in the script above with your specific search component id, typically by default something like “sk-2l-IMf-372”. You can rename the id of the component to something more user friendly to refer in your code.

13

I found a way to clear the table search box using the action framework!  I’m using the “search model” action, which I think might have been added in one of the recent releases?  Not sure whether it works for a search component too but I’d think it should.  I have a button to clear all table filters and wanted to clear the table search box too, so I tried this and it seems to work.  I added an action to the button as follows:

  • Action Type:  Search Model
  • Model:  [name of model being searched]
  • Search Text:  {{blank}}
You may or may not need an action to requery the model after this.  I have one in there but thinking maybe it’s superfluous if searching for {{blank}} already requeries the model(?)

14

This works for me as well. To make it even more seamless, I add the snippet to the ‘Select Actions’ in the search box itself. So as soon as someone selects a returned record, it loads a table and then clears itself.

var search1 = document.getElementById(“sk-2K_T-358”).getElementsByTagName(“input”)[0];
search1.value=“”;

15

This is working as a Global Action for me, but not as a Select Action.  And - when I do select a record, and the search result is cleared, the little drop-down list of results persists.  Any ideas?

16

I think I’m having a similar issue that Elissa is having.

I tried using this

var search1 = document.getElementById(“MYELEID”).getElementsByTagName(“input”)[0];

search1.value=“”;

And also tried using variations on $(‘#MYELEID input’).val(‘’); //// $(‘#MYELEID input.ui-autocomplete-input’).val(‘’);

All of this code works perfectly in Google Chrome’s console, but when I put it in a snippet that runs off of a search box’s select action it doesn’t clear the search box…

…

EDIT:

I got it working… I needed to add a delay to the clearing of the box… This works:

setTimeout(() => { $(‘#MYSEARCHBOXID input.ui-autocomplete-input’).val(‘’); }, 10);