高亮顯示匹配文字？

Question

我有flex 4並編寫我自己的自動完成組件（基於popupanchor）來搜索不同的書籍。在下拉框中，我如何突出顯示匹配的文字？例如，用戶輸入「ema」，搜索返回「寵物Sematary」....我想突出顯示「寵物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"/> 

PS：如果你將有彈出採取重點煩惱 - 手動將其添加到toolTipChildren：

systemManager.toolTipChildren.addChildAt(child, 0);