Question

您好我正在使用Flex的网站搜索工具。我希望它的工作方式与MAC桌面上的“Spotlight”工具完全相同。 “http://www.recipester.org/images/6/66/How_to_Use_Spotlight_to_Search_on_Mac_OS_X_42.png”链接指向聚光灯的图像。

我想在FLEX中创建几乎相同的东西。我目前拥有的是“自动完成”框，我可以获得我想要的所有数据。自动填充的代码如下：

<auto:AutoComplete borderStyle="none" id="txt_friends_search" 
        textAlign="left" prompt="Search Friends" dataProvider="{all_friends_list}" 
        allowEditingNewValues="true" allowMultipleSelection="true" allowNewValues="true" 
        backspaceAction="remove" labelField="label"
        autoSelectEnabled="false" matchType="anyPart" 
        height="23" right="400"  top="1" dropDownItemRenderer="{new ClassFactory(weather.index_cloud_global_search_item_renderer)}" />

我的ItemRenderer看起来像：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%" 
    verticalGap="0" horizontalGap="0"
    creationComplete="init()"
    verticalScrollPolicy="off" horizontalScrollPolicy="off" 
    verticalAlign="middle">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import com.hillelcoren.utils.StringUtils;
            import mx.utils.StringUtil;
            import mx.events.FlexEvent;
            import mx.controls.List;

        public function init():void
        {

        }                                                           
    ]]>
</mx:Script>

<mx:HBox width="100%" verticalGap="0" horizontalGap="0">
    <mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
        <mx:Label id="type"  text="{data.type}" fontSize="12"/> 
    </mx:HBox>
    <mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
        <!--mx:Label id="nameLabel"  text="{data.label}" fontSize="12"/-->
        <mx:List id="names" dataProvider="{all}"    
    </mx:HBox>      
</mx:HBox>      

<!--mx:Box id="colorBox" borderStyle="solid" width="50" height="25"/-->
<mx:Spacer width="15"/>

这显示了所有内容的类型和标签，例如：

朋友ABC
朋友XYZ
消息这是消息
消息的消息示例
文件filename1
文件filename123

我相信你明白我的观点。

但我想要创建的是：

朋友ABC XYZ 消息这是消息消息的示例文件filename1 filename123 MoreFiles

有人可以帮助我。我实际上不知道如何在这方面取得进展。

如果您想要了解更多信息，请与我们联系。

此致 Zeeshan

Answer 1

您可能想尝试这样的事情。这只是我掀起的一个示例，但是您可以使用基础知识来应用于您的解决方案。这样做是创建一个自定义项目渲染（就像你已经完成的那样），但是它正在渲染的容器，它在set dataProvider中稍微调整数据集，以便对它进行排序和过滤。

Screenshot http://i49.tinypic.com/ws4bq8.jpg

显然，您可以进一步扩展这一点以添加常用图标，格式化文本...等等。渲染器为第一个“列”文本设置了明确的宽度。这是为了更好地对齐结果，但应该在构建列表时完成（基于结果集中值的字符串长度）。干杯;）

Application.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
 <mx:Script>
  <![CDATA[
   [Bindable]
   private var items:Array = [
    { type:'friends', value:'abc' },
    { type:'friends', value:'xyz' },
    { type:'messages', value:'this is the message' },
    { type:'messages', value:'example for messages' },
    { type:'files', value:'filename1' },
    { type:'files', value:'filename123' },
   ];
  ]]>
 </mx:Script>
 <local:SpotlightComboBox 
  dataProvider="{items}"   
  width="400" />
</mx:Application>

SpotlightComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox 
 xmlns:mx="http://www.adobe.com/2006/mxml"
 itemRenderer="SpotlightComboBoxItemRenderer">

 <mx:Script>
  <![CDATA[   
   override public function set dataProvider(value:Object):void 
   {
    super.dataProvider = sort_and_filter(value as Array);
   } 

   private function sort_and_filter(source:Array):Array
   {
    if (source && source.length > 1) {     
     source.sortOn('type', Array.CASEINSENSITIVE);
     var last:String = "";
     for each(var entry:Object in source) {      
      var current:String = entry.type;
      if (current != last)            
       last = current      
      else
       entry.type = "";
      last = entry.type;
     }
    }

    return source;
   }     
  ]]>
 </mx:Script>

</mx:ComboBox>

SpotlightComboBoxItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[

  ]]>
 </mx:Script>

 <mx:HBox width="100%">
  <mx:Label width="100" text="{data.type}" />
  <mx:Label text="{data.value}" />
 </mx:HBox>
</mx:Canvas>

Answer 2

由于您提供赏金，我会提交一个不同的答案（因为前一个答案在技术上有效）。

步骤1：下载Adobe Autocomplete 组件将该类集成到您的项目中。

步骤2：创建一个派生自AutoComplete的新组件（我称之为 SpotlightField.mxml ）

<?xml version="1.0" encoding="utf-8"?>
<AutoComplete 
    xmlns="com.adobe.flex.extras.controls.*" 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="init()"
    labelField="value"  
    itemRenderer="SpotlightFieldRenderer">

    <mx:Script>
        <![CDATA[

            private function init() : void
            {
                this.filterFunction = substringFilterFunction;
            }                                                       

            private function substringFilterFunction(element:*, text:String):Boolean
            {
                var label:String = this.itemToLabel(element);
                return(label.toLowerCase().indexOf(text.toLowerCase())!=-1);
            }
        ]]>
    </mx:Script>        
</AutoComplete>

步骤3：创建要应用于此新组件的ItemRenderer（我称之为 SpotlightFieldRenderer.mxml ）。请注意，代码与前一个示例相同，但为了完整性，我会再次发布。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[

        ]]>
    </mx:Script>

    <mx:HBox width="100%">
        <mx:Label width="100" text="{data.type}" />
        <mx:Label text="{data.value}" />
    </mx:HBox>
</mx:Canvas>

步骤4：更新 AutoComplete.as 类，如下所示：

/**
 *  @private
 *  Updates the dataProvider used for showing suggestions
 */
private function updateDataProvider():void
{
    dataProvider = tempCollection;
    collection.filterFunction = templateFilterFunction;
    collection.refresh();

    sort_and_filter(collection);

    //In case there are no suggestions, check there is something in the localHistory
      if(collection.length==0 && keepLocalHistory)
      {
        var so:SharedObject = SharedObject.getLocal("AutoCompleteData");
        usingLocalHistory = true;
        dataProvider = so.data.suggestions;
        usingLocalHistory = false;
        collection.filterFunction = templateFilterFunction;
        collection.refresh();
      }
  }

private function sort_and_filter(source:Object):Object
{
    if (source && source.length > 1) {   
        trace (source.length);  
        source.sortOn('type', Array.CASEINSENSITIVE);           
        var last:String = "";
        for each(var entry:Object in source) {      
            var current:String = entry.type;
            if (current != last)            
                last = current      
            else
                entry.type = "";
            last = entry.type;
        }
    }

    return source;
}

您会注意到 sort_and_filter 函数已定义，并在 updateDataProvider 中的集合上调用。该应用程序现在看起来像这样：

Screenshot http://i47.tinypic.com/2ppy6tl.jpg

就是这样。示例应用程序现在看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var items:Array = [
                { type:'friends', value:'abc' },
                { type:'friends', value:'xyz' },
                { type:'messages', value:'this is the message' },
                { type:'messages', value:'example for messages' },
                { type:'files', value:'filename1' },
                { type:'files', value:'filename123' },
            ];
        ]]>
    </mx:Script>        
    <local:SpotlightField dataProvider="{items}" width="400" />
</mx:Application>

如果您有任何其他问题，请与我们联系。根据你想要显示结果的方式，还有一些工作要做，但这应该可以让你获得95％的路径;）

使用全局搜索工具 - 就像在MAC上一样

2 个答案: