title: Flex - Search/Filter DataGrid by Text Input
body: <p>I’m using a filter setup that I found online and I’m having trouble filtering my mx:DataGrid using three components – comboBox, checkbox and text input. The checkbox and comboBox are working properly with my IFilter interface and Filter class, but I’m unable to get the search input working correctly. Here’s of the code from the source files</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>package com.daveoncode.filters {
   
  //Defines a common interface that must be implemented by all the filters.
   
   public interface IFilter {
    
    function apply(item:Object):Boolean;
    
   }
   
  }
  
  package com.daveoncode.filters {
   
   // The only purpose of Filter is to be wrapped by one or more filters (classes which extend AbstractFilter)
   
   public class Filter implements IFilter {
  
    // A wildcard which means "all values are accepted"
    
    public static const ALL_VALUES:String = "*";
    
    public function Filter() {
     
    }
  
    // This is a basic implementation of IFilter interface, the value returned is always true and only apply() 
    // methods implemented by subclasses of AbstractFilter have real buisiness logic implementation
     
    //@return Boolean &lt;p&gt;Always true&lt;/p&gt;
     
    public function apply(item:Object):Boolean {
     
     return true;
     
    }
    
   }
   
  }
  
  package com.daveoncode.filters {
   
   public class SearchFilter extends AbstractFilterDecorator {
    
    // @param target IFilter &lt;p&gt;A reference to a wrapped IFilter object&lt;/p&gt;
    // @param value Object &lt;p&gt;Value against which the filter is applied&lt;/p&gt;
    
    public function SearchFilter(target:IFilter, value:Object) {
     
     super(target, value);
     
    }
    
  // Impl of IFilter int by overr the dummy apply() of AbstractFilterDecorator
    
    override public function apply(item:Object):Boolean {
     
  
   return this._target.apply(item) &amp;&amp; (this._value == item.Package || this._value == Filter.ALL_VALUES);
     
    }
    
   }
   
  }</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>I’m trying to get the search functionality to work with my applyFilterRefresh() filter function below. Currently it does search the DataGrid, but it only filters case sensitive exact matches. I’m looking for it to filter after each stroke.</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>private function applyFiltersRefresh():void {
         
    var data:ArrayCollection = ArrayCollection(sourceData);
    var filter:IFilter = new Filter();
       
    //combo box filtering - works great!
    filter = new FacilityTypeFilter(filter, facilityFilter.value);
    filter = new BedRangeFilter(filter, bedFilter.value);
      
    //checkbox filtering – works great!
    if (hideHealthcareVar == "Healthcare"){
    filter = new HideHealthcareFilter(filter, hideHealthcareVar.valueOf());
      }
      
    //Search box filtering – needs 
     if (search.text.length &gt; 0){
     var tempSearch:String = search.text;
      filter = new HideHealthcareFilter(filter, tempSearch);
    }
      
    data.filterFunction = filter.apply;
    data.refresh();
     
   
      
   }</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>I am able to filter my datagrid (by each key stroke and non-case sensitive) this way, but because then the filters end up overriding each other instead of doing both at the same time. That’s why I’m trying to include it in my ApplyFiltersRefresh() functions. Sorry for the lengthy post and thanks in advance for the help!!</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>private function budgetGrid_filterFunc(item:Object):Boolean {
    if (search.text.length == 0) return true;
    var f:String = "ig";
    var packageSearch:RegExp = new RegExp(search.text, f);
    var packageMatch:Boolean = packageSearch.test(item.Package);
      
    var itemSearch:RegExp = new RegExp(search.text, f);
    var itemMatch:Boolean = itemSearch.test(item.ItemNum);
      
    var descriptionSearch:RegExp = new RegExp(search.text, f);
    var descriptionMatch:Boolean = descriptionSearch.test(item.ItemDescription);
      
    return (packageMatch || itemMatch || descriptionMatch);
      
      
  }
  
  private function searchInput_change():void {
      
  
    if (search.text.length == 0) {
     budgetGrid.dataProvider.filterFunction = null;
    } else {
     budgetGrid.dataProvider.filterFunction = budgetGrid_filterFunc;
    }
     budgetGrid.dataProvider.refresh();
      
      
    }
     </code></pre>
  </div>
  </div>
  </p>