Question

我有flex 4并编写自己的自动完成组件（基于popupanchor）来搜索不同的书籍。在下拉框中，如何突出显示匹配的文本？例如，用户输入“ema”并且搜索返回“Pet Sematary”....我想突出显示“Pet Sematary”中的字母“ema”

Answer 1

一周前写过自动完成:)你需要使用Spark文本组件并将自定义TextFlow传递给他们：

private function init():void
{
    var textFlow:TextFlow = new TextFlow();
    var paragraph:ParagraphElement = new ParagraphElement();
    textFlow.addChild(paragraph);
    var elements:Vector.<FlowElement> = highlight("Pet Sematary", "Se");
    var n:int = elements.length;
    for (var i:int = 0; i < n; i++)
    {
        paragraph.addChild(elements[i]);
    }
    label.textFlow = textFlow;
}

private function highlight(text:String, query:String):Vector.<FlowElement>
{
    var result:Vector.<FlowElement> = new Vector.<FlowElement>();
    // since we need to compare ignore-case we can not use split()
    // and have to collect indexes of "query" matches in "text"
    var indexes:Vector.<int> = new Vector.<int>();
    var index:int = 0;
    var textLowerCase:String = text.toLocaleLowerCase();
    var queryLowerCase:String = query.toLocaleLowerCase();
    var queryLength:int = query.length;
    while (true)
    {
        index = textLowerCase.indexOf(queryLowerCase, index);
        if (index == -1)
            break;

        indexes.push(index);
        index += queryLength;
    }

    // now add SpanElement for each part of text. E.g. if we have 
    // text="aBc" and query is "b" then we add "a" and "c" as simple
    // span and "B" as highlighted span.
    var backgroundColor:uint = 0xFFCC00;
    var n:int = indexes.length;
    if (n == 0) // no matches
    {
        addSpan(result, text);
    }
    else
    {
        var startIndex:int = 0;
        for (var i:int = 0; i < n; i++)
        {
            if (startIndex != indexes[i])
                addSpan(result, text.substring(startIndex, indexes[i]));

            addSpan(result, text.substr(indexes[i], queryLength),
                        backgroundColor);

            startIndex = indexes[i] + queryLength;
        }

        if (startIndex != text.length)
            addSpan(result, text.substr(startIndex));
    }

    return result;
}

private function addSpan(vector:Vector.<FlowElement>, text:String, 
    backgroundColor:* = "transparent"):void
{
    var span:SpanElement = new SpanElement();
    span.text = text;
    span.backgroundColor = backgroundColor;
    vector.push(span);
}

MXML代码：

<s:RichEditableText editable="false" multiline="false" 
    selectable="false" id="label"
    horizontalCenter="0" verticalCenter="0"/>

P.S：如果弹出窗口会引起问题 - 将其手动添加到toolTipChildren：

systemManager.toolTipChildren.addChildAt(child, 0);

高亮匹配文字？

1 个答案: