Travailler sur un outil de recherche globale - Tout comme sur MAC

Question

Bonjour, Je travaille sur un outil de recherche pour mon site Web dans Flex. Je veux que cela fonctionne exactement comme l'outil "Spotlight" sur le bureau MAC. "http://www.recipester.org/images/6/66/How_to_Use_Spotlight_to_Search_on_Mac_OS_X_42.png" Le lien est à une image de projecteur.

Je veux créer presque la même chose dans FLEX. Ce que j'ai actuellement est un "Autocomplete" boîte, et j'obtiens toutes les données que je veux dedans. Code pour la saisie semi-automatique est ci-dessous:

<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)}" /> 

Et mon ItemRenderer ressemble à:

<?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"/> 

Cela montre le type et l'étiquette de tout, par exemple:

• Amis ABC
• Amis XYZ
• Messages Voici le message
• Messages par exemple pour les messages
• Fichiers NomFichier1
• Fichiers filename123

Je crois que vous avez mon point là-bas.

Mais ce que je veux créer quelque chose comme:

Amis ABC XYZ Messages Tel est le message exemple des messages Fichiers filename1 filename123 MoreFiles

Quelqu'un peut-il plz me aider dans ce . En fait, je n'ai aucune idée de comment aller de l'avant dans ce domaine. Faites-moi savoir si vous voulez plus de précisions sur quoi que ce soit.

Cordialement Zeeshan

Answer 1

Depuis que vous offrez une prime, je vais présenter une réponse différente (que le précédent est techniquement valide).

Étape 1: Télécharger le composant Adobe Autocomplete intégrer la classe dans votre projet.

Étape # 2: Créer un nouveau composant qui est dérivé de saisie semi-automatique (j'ai appelé le mien 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> 

Étape # 3: Créez le ItemRenderer que vous souhaitez appliquer à ce nouveau composant (j'ai appelé le mien SpotlightFieldRenderer.mxml). Notez que le code est le même que l'exemple précédent, mais je le posterai de nouveau pour l'exhaustivité.

<?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> 

Étape # 4: Mise à jour le AutoComplete.as classe comme suit:

/** 
* @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; 
} 

Vous remarquerez que la fonction sort_and_filter est définie, et a appelé la collecte à l'intérieur updateDataProvider. L'application ressemble maintenant à ceci:

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

Voilà. L'exemple d'application ressemble maintenant à ceci:

<?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> 

Faites-moi savoir si vous avez d'autres questions. Il y a encore un peu de travail à faire en fonction de la façon dont vous voulez afficher les résultats, mais cela devrait vous atteindre 95%;)

Answer 2

Vous pouvez essayer quelque chose comme ça. Ceci est juste un échantillon que j'ai fouetté, mais les bases sont là pour vous appliquer à votre solution. Qu'est-ce que cela fait est de créer un rendu d'élément personnalisé (comme vous l'avez déjà fait), mais le conteneur qu'il rend, il ajuste le jeu de données légèrement dans setProvider de sorte qu'il trie et filtre.

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

De toute évidence, vous pouvez élargir encore plus loin d'ajouter des icônes communes, texte mis en forme ... etc. Le moteur de rendu a une largeur explicite fixée pour le premier texte « colonne ». Cela permet de mieux aligner les résultats, mais devrait probablement être fait pendant la construction de la liste (en fonction des longueurs de chaîne des valeurs du jeu de résultats). Vive);

---

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>