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>

JeffryHouser · Accepted Answer · 2011-09-24T02:09:22.867

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>

I reopened this because the above code works with a trace, it returns the start and end ints but the actual string doesn't get highlighted. What am I missing? — RapsFan1981, Sep 20 '11 at 23:00
I don't understand what "Works with a trace" means. Can you provide a full runnable sample? — JeffryHouser, Sep 20 '11 at 23:11
If you can provide a runnable sample; I'll copy and paste it into my code editor and take a look; but just adding a trace statement doesn't help me. — JeffryHouser, Sep 21 '11 at 14:28
The reason your trace comes out undefined is because the selectRange() does not return anything. ( http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/supportClasses/SkinnableTextBase.html#selectRange%28%29 ). The return type is void. The reason the highlight on the textArea is invisible is because the component does not have focus. The solution is to give the textArea focus in your search button handler. I'll update my answer to include code. In the future, I recommend that you specify you are dealing with a Flex mobile project as part of your question. — JeffryHouser, Sep 23 '11 at 20:54

Highlight string search string

1 Answers1