在全局搜索工具上工作 - 就像在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上一樣

回答

相關問題