Highlight string search string

Question

I'm using the code below to search the text in a textarea for a string entered in a textinput. I'm trying to highlight the string in the textarea after it's been searched for. I assume the way to do this is selectRange(). I'm not sure how to find the endIndex for the second parameter of selectRange(). Below is what I have:

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

    var search_result:int = text.search(search_Str);
    trace(search_result);

EDIT

    <?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:titleContent>
        <s:TextInput id="searchTxt"/>
        <s:Button label="Button" click="searchBtn_clickHandler(event)"/>
    </s:titleContent>
    <s:TextArea id="mainTextField" x="33" y="35" width="544" height="444"/>
    <fx:Script>
        <![CDATA[
            public var text:String;
            public var search_Str:String;

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

            var search_result:int = text.search(search_Str);
            trace(search_result); // Traces correct int values
            trace(mainTextField.selectRange(search_result,search_result+search_Str.length)); // Traces "undefined"
        }
        ]]>
    </fx:Script>
</s:View>

Answer 1

Can't you just calculate it based on the length of the search string?

The modified code would be like this:

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

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

---

Update, In response to the original poster's code update; I went ahead and tested. A TextAre will not display an item as selected if it does not have focus. Therefore the solution to get the selected range to highlight is to set focus to the textArea after the button is clicked. Here is code demonstrating this:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:titleContent>
        <s:TextInput id="searchTxt" text="Quick" />
        <s:Button label="Button" click="searchBtn_clickHandler(event)"/>
    </s:titleContent>
    <s:TextArea id="mainTextField" x="33" y="35" width="544" height="444" text="The Quick Brown Fox Jumped Over The Lazy Dogs"/>
    <fx:Script>
        <![CDATA[
            public var text:String;
            public var search_Str:String;

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

                var search_result:int = text.search(search_Str);
                trace(search_result); // Traces correct int values
                trace(search_result+search_Str.length);
//              trace(mainTextField.selectRange(search_result,search_result+search_Str.length)); // Traces "undefined"
                mainTextField.selectRange(search_result,search_result+search_Str.length)
            }
        ]]>
    </fx:Script>


</s:View>