FLEX{er}

This article will explain how to create a wildcard search. What I mean is the following:

dir *.*

dir myfile??.txt

The old DOS searching way. The first command (if you’ll run them in Command Prompt) returns all files with extension from the current folder. The second command will return any file having its name as this: myfile00.txt, myfilecc.txt or myfile_t.txt.

Take a look at the following application:

Clicking on the Filter button or pressing Enter key on the text input will apply the wildcard string onto the list bellow.

This is the entire code. Is commented and well explained but even though you may need some knowledge about Regular Expressions (or Regexp).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" creationComplete="init()" width="400" height="200">
    <mx:Label x="10" y="12" text="Wildcard string:"/>
    <mx:TextInput id="search" x="110" y="10" width="207" 
        keyUp="handleDoSearch(event)"/>
    <mx:Button x="325" y="10" label="Filter" click="handleDoSearch(event)"/>
    <mx:DataGrid x="10" y="40" width="380" height="150" dataProvider="{dataGridData}">
        <mx:columns>
            <mx:DataGridColumn headerText="Filename" dataField="@filename"/>
            <mx:DataGridColumn headerText="Size" dataField="@size"/>
            <mx:DataGridColumn headerText="Date" dataField="@date"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:Script>
        <![CDATA[
 
            // variable binded to the data grid
            // this is the variable that we will modify
            [Bindable]
            private var dataGridData:XMLList = new XMLList();
 
            // base data - this variable will not be modified
            private var dataGridStartData:XML = 
                <root>
                    <row filename="file_cc" size="123" date="2008-08-07" />
                    <row filename="file_b" size="12" date="2008-08-08" />
                    <row filename="file_a" size="56" date="2008-08-01" />
                    <row filename="my_f^ile" size="1786" date="2008-08-01" />
                    <row filename="special-_$+./file" size="23" date="2008-08-03" />
                    <row filename="te\\s]|t_1" size="899" date="2008-07-04" />
                    <row filename="te[st_2" size="777" date="2008-06-04" />
                </root>;
 
            // handler for filtering
            // used by both: button and text input
            private function handleDoSearch(event:Event):void
            {
                // checking the event type
                if (event is MouseEvent ||
                    (event is KeyboardEvent && 
                        (event as KeyboardEvent).keyCode == 13
                    )
                )
                {
                    // if there is at least one caracter in the text input
                    if (search.text.length > 0)
                    {
                        // reset the data grid binded variable
                        dataGridData = new XMLList();
                        // new temporary xml
                        var tempData:XML = new XML("<root></root>");
                        // looping through the base data
                        for each (var item:XML in dataGridStartData.children())
                        {
                            // matching wildcard string
                            if (matchWildcards(item.@filename,search.text))
                            {
                                // add a new child
                                var tempXMLItem:XML = new XML("<row></row>");
                                tempXMLItem["@filename"] = item.@filename;
                                tempXMLItem["@size"] = item.@size;
                                tempXMLItem["@date"] = item.@date;
                                tempData.appendChild(tempXMLItem);
                            }
                        }
                        // set the binded data to the new found items
                        dataGridData = tempData.children();
                    } 
                    else
                    {
                        // reset the binded data to base data
                        dataGridData = dataGridStartData.children();
                    }
                }
            }
 
            // matching wildcard string to the string
            private function matchWildcards(string:String, searchTerm:String):Boolean
            {
                // we use regexp to search
                var regexp:String = new String();
                // escape special chars like: $&.- which are
                // special chars for regexp language
                // but we won't put here * and ? which are
                // our search characters
                regexp = searchTerm.replace(
                    new RegExp("([{}\(\)\^$&.\/\+\|\[\\\\]|\]|\-)","g"),"\\$1");
                // we transform wildcards to regexp like this:
                //   * = .*
                //   ? = .?
                regexp = regexp.replace(new RegExp("([\*\?])","g"),".$1");
                // the string is from the beginning to the end
                regexp = "^" + regexp + "$";
                // return true is found
                return (string.search(regexp) >= 0 ? true : false);
            }
 
            // initialization
            private function init():void
            {
                // data grid initialization
                dataGridData = dataGridStartData.children();
            }
        ]]>
    </mx:Script>
</mx:Application>

The important function is matchWildcards which takes two parameters: the first one is the string to search into and the second one is the search term or the filtering string. The function return true or false depending if the two strings matches or not.

As explained in the code in the matchWildcards the following step are taken:

escape special regexp characters
transform wildcards to regexp:
“*” into “.*”
“?” into “.?”
(exclude commas)
add beginning and end regexp constraints: “^” and “$” (exclude commas)
search it and return the result