How to create an action that clears the search box?

  • 3
  • Question
  • Updated 4 years ago
We would like to create an action that clears the search box, rather than having a user delete the text value in the box. I set up a button that ran a snippet, but was unable to get the js to clear the box. Does anyone have any code that would work for this? Or a better idea on how to clear the search box?
Photo of Seth Leonard

Seth Leonard

  • 662 Points 500 badge 2x thumb

Posted 4 years ago

  • 3
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
You could do something like this:

var $ = skuid.$;
var search = $('input.searchbox');
search.val('');
Photo of Menachem Shanowitz

Menachem Shanowitz

  • 1,074 Points 1k badge 2x thumb
I would suggest that you use the unique id of the table like this $('#tableid input.searchbox').val(''); if there are other tables on the page. 

This would only clear the value from the box but the search would still be in effect on the table. To actually clear the search from the table you have to run the script below

var model = skuid.$M("modelName");
var searchCondition;
for (var i = 0; i < model.conditions.length; i++)
{
if (model.conditions[i].name.indexOf('searchbox')!=-1)
{
searchCondition = model.conditions[i];
}
}
model.deactivateCondition(searchCondition);
model.updateData();
(Edited)
Photo of Seth Leonard

Seth Leonard

  • 662 Points 500 badge 2x thumb
Thank you Moshe and Menachem! I was able to get it working with this code. Much appreciated!
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
This isn't working for me. I have a page with multiple tabs & tables, so maybe that's the problem? When I try to call this it just hangs. I think there is a condition called "18_searchbox", but even when I hardcode that it won't clear the searchbox or the condition.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Correction: It does seem to find and clear the search value when the table search is in use, however it takes about twice as long as clearing other table filters and does not blank out the search box, so it is confusing. I've tried variations of:

var $ = skuid.$;
$('projects input.searchbox').val(''); 

But it haven't yet found something that clears the text in the searchbox.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
This still not working? If you set the Id of the table to "projects", then it looks as though you need insert "#" into your code in order for the select to work.

var $ = skuid.$;
$('#projects input.searchbox').val(''); 
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
I'm not sure where the problem is, as I seem to get different problems at varying times. I'm trying to do a real "clear searchbox and requery" button, but can't get it to work. Here's the code I have:
// deactivates the table searchbox condition for the given model
var $ = skuid.$;
$('#ProjectsLive input.searchbox').val(''); 
var model = skuid.$M("projects");
var searchCondition;
for (var i = 0; i < model.conditions.length; i++)
{
//    alert(model.conditions[i].name);
    if (model.conditions[i].name.indexOf('18_searchbox')!=-1)
        {searchCondition = model.conditions[i];}
}
model.deactivateCondition(searchCondition);
// don't want to do the model refresh here as it wlll happen as an action on the button when other filters are cleared as well
//model.updateData();