Apache flex 在全球搜索工具上工作-就像在MAC上一样
嗨，我正在为我的Flex网站开发一个搜索工具。我希望它能像MAC桌面上的“聚光灯”工具一样工作。“”链接指向聚光灯的图像 我想在FLEX中创建几乎相同的东西。 我现在拥有的是一个“自动完成”框，我从中获得了我想要的所有数据。自动完成的代码如下：Apache flex 在全球搜索工具上工作-就像在MAC上一样,apache-flex,actionscript,Apache Flex,Actionscript,嗨，我正在为我的Flex网站开发一个搜索工具。我希望它能像MAC桌面上的“聚光灯”工具一样工作。“”链接指向聚光灯的图像 我想在FLEX中创建几乎相同的东西。 我现在拥有的是一个“自动完成”框，我从中获得了我想要的所有数据。自动完成的代码如下： <auto:AutoComplete borderStyle="none" id="txt_friends_search" textAlign="left" prompt="Search Friends" dataProvider
<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)}" />
<?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"/>
你可能想试试这样的东西。这只是我准备的一个示例，但基本知识可以应用到您的解决方案中。它所做的是创建一个自定义项渲染（正如您已经做的那样），但它所渲染的容器会在set dataProvider中稍微调整数据集，以便进行排序和筛选
显然，您可以在此基础上进一步扩展，添加常用图标、格式化文本。。。等。渲染器为第一个“列”文本设置了显式宽度。这是为了更好地对齐结果，但可能应该在构建列表时执行（基于结果集中值的字符串长度）。干杯；）
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>
1) {
source.sortOn（'type'，Array.case不敏感）；
var last:String=“”；
对于每个（变量条目：源中的对象）{
当前变量：String=entry.type；
如果（当前！=上次）
最后=当前
其他的
entry.type=“”；
last=entry.type；
}
}
返回源；
}
]]>
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>
既然你提供了悬赏，我将提交一个不同的答案（因为上一个答案在技术上是有效的）
步骤#1:下载组件，将类集成到项目中
步骤#2:创建一个从AutoComplete派生的新组件（我称之为mine SpotlightField.mxml）
您会注意到，已定义了sort_和_filter函数，并在updateDataProvider中的集合上调用了该函数。该应用程序现在看起来如下所示：
<?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>
就这样。示例应用程序现在如下所示：
<?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%的工作；） 这能给我自动完成功能吗？这对我来说非常重要，我需要一个自动完成功能。这只是ComboBox的一个子类，但理论上你可以将自动完成组件的子类化。我提供的示例是概念证明，而不是完整的解决方案。只需修改代码以扩展AutoCompleteBox（或它的任何名称），然后从那里开始；）您在这里所做的，也正是我的代码所做的。我想你不明白我想做什么。我想在mac中创建类似聚光灯搜索的东西。Zeeshan，我更新了解决方案，告诉你在哪里将排序代码插入到自动完成类中。这将做（我认为是）正是你所寻找的。我能预见的唯一问题是，如果我们对“分组”的含义（就结果而言）有相互冲突的定义，多谢马克西姆斯，这正是我想要做的。我为自己的天真感到抱歉。但我试图按照您在这里所说的做，但我在autocomplete.as文件中出错。我明天会再调查这件事。我希望它能起作用。再次感谢。上面的例子需要一些“tweeking”才能让它们工作。如果您仍然有问题，我可以为您捆绑一个项目并链接它，以便您可以测试它。我想你应该先自己动手（因为这比剪切和粘贴更有趣：P）哈哈。。。谢谢马克西姆斯。如果你能像你提到的那样发送一个项目，我将不胜感激。我在尝试做的事情中仍然会出错。请注意：Mac不是一个缩略词。：）
/**
* @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;
}
<?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>