3 Replies Latest reply on May 25, 2007 9:13 AM by BLXWebMaster

    Creating A Filter/Search On Multiple Fields

    AwesomeDigital
      I am thinking of making an online Phone Directory for our Intranet as one of my first Flex applications.
      The data source will be an XML file containing about 300 employees.
      The initial view would be a list of all employees in a spreadsheet view.

      I would like to have a SINGLE Search/Filter box where, as the user types in each letter, the list only shows matching items.

      So if the user types in "Joh", the only items left in the list would be individuals with those letters in either the first OR last name.

      Am I trying to build something too complex for Flex? I am so-so with action script, but I am getting better and I like to work through the problem until it works.



      If you have any suggestions or keywords to search on, I would appreciate it.


      Thanks
      Mathias
        • 1. Re: Creating A Filter/Search On Multiple Fields
          BLXWebMaster
          Easy. Here is a quick sample of a customers datagrid with one search text field that filters all columns.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application
          xmlns:mx=" http://www.adobe.com/2006/mxml"
          layout="absolute">

          <mx:Script>
          <![CDATA[
          import mx.collections.*;
          import mx.controls.*;
          import mx.rpc.events.*;
          import mx.events.*;

          [Bindable]
          private var customers:ArrayCollection = null;
          private function customersRPCResult(event:ResultEvent):void {
          customers = new ArrayCollection();
          customers = event.result.customers.person as ArrayCollection;
          customers.filterFunction=processCustomerFilter;
          }

          public function processCustomerFilter(item:Object):Boolean {
          var result:Boolean=false;
          if (
          (textCustomer.text == '' || (item.last != null && String(item.last).toUpperCase().indexOf(textCustomer.text.toUpperCase()) >= 0) ||
          ((item.first != null && String(item.first).toUpperCase().indexOf(textCustomer.text.toUpperCase()) >= 0)) ||
          ((item.home != null && String(item.home).toUpperCase().indexOf(textCustomer.text.toUpperCase()) >= 0)))
          )
          {
          result=true;
          }
          return result;
          }

          private function clearSearch():void{
          textCustomer.text = '';
          customers.refresh();
          }

          private function Filter():void{
          textCustomer.text = '';
          customers.refresh();
          }
          ]]>
          </mx:Script>

          <mx:Panel x="63" y="129" width="493" height="200" layout="absolute" title="Customer Search" id="panel3">
          <mx:DataGrid x="10" y="36" width="453" id="customerInfo" height="114" dataProvider="{customers}" >
          <mx:columns>
          <mx:DataGridColumn headerText="Last Name" dataField="last"/>
          <mx:DataGridColumn headerText="First Name" dataField="first"/>
          <mx:DataGridColumn headerText="Phone Number" dataField="home"/>
          </mx:columns>
          </mx:DataGrid>
          <mx:Label x="10" y="10" text="Customer" textAlign="right"/>
          <mx:TextInput id="textCustomer" change="customers.refresh();" x="79" y="8"/>
          <mx:Button x="247" y="8" label="Clear Search" click="clearSearch()"/>
          <mx:Button x="369" y="8" label="Refresh List" click="customers.refresh();"/>
          </mx:Panel>

          </mx:Application>
          • 2. Re: Creating A Filter/Search On Multiple Fields
            AwesomeDigital Level 1
            Sweet! Thanks BLX, that gives me a great example to work from.

            Mathias