Question

I have a TextArea, a TextInput and a button. When text is entered into the TextInput the TextArea is searched for the matching string, however it only highlights the first found instance of the string. How can I do a ‘find next’ type of operation.

protected function searchBtn_clickHandler():void
        {
            text = mainTextField.text;
            search_Str = searchTxt.text;

            var search_result:int = text.search(search_Str);
            trace(search_result);
            mainTextField.setFocus();
            mainTextField.selectRange(search_result,search_result+search_Str.length);
        }

EDIT

protected function searchBtn_clickHandler():void
        {
            text = mainTextField.text;
            search_Str = searchTxt.text;

            search_result = text.search(search_Str);
            trace(search_result);
            mainTextField.setFocus();
            mainTextField.selectRange(search_result,search_result+search_Str.length);
            oldSearch_result = search_result;
        }

        protected function findNextBtn_clickHandler():void
        {
            search_Str = searchTxt.text;

            // truncate the text using substring; this gives you everything in mainTextField after your previous search results
            var truncatedText:String = mainTextField.text.substring(oldSearch_result+search_Str.length);

            search_result = truncatedText.search(search_Str);
            mainTextField.setFocus();
            // when you select the range, you want to offset your result index w/ the characters your chopped off  
            mainTextField.selectRange(oldSearch_result+search_Str.length+search_result,search_result+search_Str.length);

        }

Answer 1

When the user clicks “find next” button, just truncate the text based on the search_str.length and search_result–in memory–and perform the search again.

protected function searchAgain_ClickHandler(event:Event):void{
  search_Str = searchTxt.text;

  // truncate the text using substring; this gives you everything in mainTextField after your previous search results
  var truncatedText = mainTextField.text.substring(oldSearchResult+search_Str.length);

  var search_result:int = truncatedText.search(search_Str);
  mainTextField.setFocus();
 // when you select the range, you want to offset your result index w/ the characters your chopped off  
mainTextField.selectRange(oldSearchResult+search_Str.length+search_result,search_result+search_Str.length);

}

More info on substring

---

Edit 12/7/2011

Here is a full code sample showing this approach working:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;

            import spark.layouts.HorizontalLayout;

            protected var oldSearchResult :int =0;

            protected function button1_clickHandler(event:MouseEvent):void
            {
                var search_Str : String = searchTxt.text;

                // truncate the text using substring; this gives you everything in mainTextField after your previous search results
                var truncatedText : String;
                truncatedText = mainTextField.text.substring(oldSearchResult);

                var search_result:int = truncatedText.search(search_Str);
                mainTextField.setFocus();
                // when you select the range, you want to offset your result index w/ the characters your chopped off  
                if(search_result != -1){
                    mainTextField.selectRange(oldSearchResult+search_result,oldSearchResult+search_result+search_Str.length);
                    oldSearchResult = oldSearchResult+search_result+search_Str.length;
                } else {
                    Alert.show('no more results');
                }

            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Form height="100%" width="100%">
        <s:FormItem label="Search Text" layout="{new HorizontalLayout()}" width="100%" >
            <s:TextInput id="searchTxt" text="the" />
            <s:Button label="Search Next" click="button1_clickHandler(event)" />
        </s:FormItem>
        <s:FormItem height="100%" width="100%">
            <s:TextArea  id="mainTextField">
                <s:text>
                    The Quick Brown Fox Jumped Over The Lazy Dogs and Landed on the Other Side of the River, bouncing back and forth between two turtles in an attempt to escape the flying vulture.
                </s:text>
            </s:TextArea>
        </s:FormItem>
    </s:Form>
</s:WindowedApplication>