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

嗨，我正在为我的网站在Flex中使用搜索工具。我希望它能像MAC桌面上的“Spotlight”工具一样工作。 “http://www.recipester.org/images/6/66/How_to_Use_Spotlight_to_Search_on_Mac_OS_X_42.png”链接是聚光灯下的图像。在全局搜索工具上工作 - 就像在MAC上一样

我想在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 消息这是消息消息示例文件，文件名1 filename123 MoreFiles

有人可以PLZ帮我在这。我其实不知道该如何向前迈进。

让我知道你是否想对任何事情做更多的澄清。

问候 Zeeshan

来源

2010-01-18 Zeeshan Rang

只是一个说明：Mac不是一个缩写。 :) – Jeff 2010-01-26 16:00:16

既然你提供的赏金，我会提出一个不同的答案（因为前一个是技术上有效）。

步骤1：下载Adobe Autocomplete组件将类整合到您的项目中。

第2步：创建一个从自动完成衍生一个新的组件（我叫雷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％的方式;）

来源

2010-01-25 16:37:19

你在这里做了什么，正是我的代码也在做什么。我想你不明白我想做什么。我想在mac中创建类似聚光灯搜索的内容。它应该将事物分组。 – 2010-01-26 00:17:25

Zeeshan，我更新了解决方案，向您展示将排序代码插入AutoComplete类的位置。这将做（我所假设的）正是你在找什么。我可以预见的唯一问题是，如果我们对“分组”的含义有冲突（就结果而言）。 – 2010-01-26 16:07:05

非常感谢Maximus，这正是我想要做的。我很抱歉成为一个天真的人。但是我试图按照你在这里所说的去做，但是我在autocomplete.as文件中遇到了错误。我明天会再看看这个。我希望它会起作用。再次感谢。 – 2010-01-27 00:59:29

你可能想尝试这样的事情。这只是我掀起的一个示例，但基本知识适用于您的解决方案。这是做的是创建一个自定义项目渲染（如你已经完成），但它渲染的容器，它调整数据集略微设置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>

来源

2010-01-20 20:57:41

这将能够给我自动完成功能吗？这对我来说非常重要，我需要一个自动完成功能。 – 2010-01-23 02:27:43

这只是ComboBox的一个子类，但理论上你可以创建一个自动完成组件的子类。我提供的例子是概念验证，而不是完整的解决方案。只需修改代码以扩展一个AutoCompleteBox（或任何它被称为）并从那里去;） – 2010-01-25 15:43:47

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

回答

相关问题