Clear Search Component

Chandra V
edited March 7, 2020 in Questions
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!

Comments

  • Dave
    Dave 💎
    edited January 27, 2017
    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
  • Chandra V
    edited February 25, 2019
    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.
  • mB Andréas K.LeF
    edited March 11, 2016
    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!
  • mB Andréas K.LeF
    edited March 11, 2016
    this project seems particularly close to the functionality you're looking for https://skorecky.github.io/Add-Clear/
  • Chandra V
    edited February 25, 2019
    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.


  • Glenn Elliott
    edited April 11, 2017
    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".
  • Glenn Elliott
    edited April 11, 2017
    Bump?

    The best option is to clear the search term after selecting a result. Salesforce Lightning Experience does this and it works well.
  • Abhi Indulkar
    edited March 7, 2020
    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="";
  • Vivek Gupta
    edited January 31, 2017
    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]);
    });
  • Chandra V
    edited February 25, 2019
  • Jayesh Bhatnagar
    edited August 1, 2017
    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.
  • and thorough
    edited April 4, 2018
    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(?)
  • Tim Shores
    edited June 27, 2019
    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="";
  • Elissa Bradley
    Elissa Bradley ✭✭✭✭
    edited March 7, 2020
    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?
  • Mark L
    Mark L ✭✭✭✭
    edited December 4, 2020

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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!