Clear Search Component

  • 3
  • Question
  • Updated 8 months ago
  • Answered
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!
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb

Posted 3 years ago

  • 3
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
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.
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
This is similar - I think - to the issue to which I've answered posted here https://community.skuidify.com/skuid/topics/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!
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
this project seems particularly close to the functionality you're looking for https://skorecky.github.io/Add-Clear/
(Edited)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
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.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
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".
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Bump?

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

Abhi Indulkar

  • 144 Points 100 badge 2x thumb
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="";
Photo of Jayesh Bhatnagar

Jayesh Bhatnagar

  • 476 Points 250 badge 2x thumb
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.
Photo of Vivek Gupta

Vivek Gupta

  • 378 Points 250 badge 2x thumb
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]);
});
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Photo of and thorough

and thorough

  • 736 Points 500 badge 2x thumb
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(?)