ActionScript - 实时搜索和更新DataProvider列表?

时间:2010-11-12 08:51:54

标签: xml actionscript-3 list search livesearch

我想将实时搜索添加到数据提供程序是非常大的XML的列表中。为简单起见,我们假设我的XML只是世界上180个国家的列表:

package
{
//Imports
import fl.controls.List;
import fl.data.DataProvider;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;

//Class
public class LiveSearchXMLList extends Sprite
    {
    //Variables
    private var XMLData:XML;
    private var dp:DataProvider;
    private var list:List;

    //Constructor
    public function LiveSearchXMLList()
        {
        addEventListener(Event.ADDED_TO_STAGE, init);
        }

    //Initialization
    private function init(evt:Event):void
        {
        removeEventListener(Event.ADDED_TO_STAGE, init);

        //Download XML File
        var XMLLoader:URLLoader = new URLLoader();
        XMLLoader.addEventListener(IOErrorEvent.IO_ERROR, IOEventErrorHandler);
        XMLLoader.addEventListener(Event.COMPLETE, XMLLoaderCompleteEventHandler);
        XMLLoader.load(new URLRequest( /* COUNTRY_LIST_XML_FILE */ ));
        }

    //XMLLoader Error Handler
    private function IOEventErrorHandler(evt:IOErrorEvent):void
        {
        //Remove Event Listeners
        evt.target.removeEventListener(IOErrorEvent.IO_ERROR, IOEventErrorHandler);
        evt.target.removeEventListener(Event.COMPLETE, XMLLoaderCompleteEventHandler);

        //Throw Error
        throw(evt.text);
        }

    //XMLLoader Complete Handler
    private function XMLLoaderCompleteEventHandler(evt:Event):void
        {
        //Remove Event Listeners
        evt.target.removeEventListener(IOErrorEvent.IO_ERROR, IOEventErrorHandler);
        evt.target.removeEventListener(Event.COMPLETE, XMLLoaderCompleteEventHandler);

        //Assign XMLData
        XMLData = new XML(evt.target.data);

        createList();
        }

    //List
    private function createList():void
        {
        //Assign And Alphabetize Data
        dp = new DataProvider(XMLData);
        dp.sortOn("countryName");

        //Create List Object
        list = new List();
        list.width = 400;
        list.height = 400;
        list.x = list.y = 25;
        list.labelField = "countryName";
        list.dataProvider = dp;
        }
    }
}

列表的labelFields由XML元素的<countryName>填充并按字母顺序排列。

我想创建一个输入文本字段,它将侦听击键并根据与countryName元素值匹配的输入字符串更新列表。因此,如果我在文本字段中输入“can”,列表将突然减少到只有5行:

  • 美属萨摩亚
  • 加拿大
  • 中非共和国
  • 多米尼加共和国
  • 梵蒂冈城

当然,实时搜索也应该是非破坏性的 - 按一次删除,这样搜索字段现在显示为“ca”,这会将5行列表增加到21行。 (南极洲,牙买加等)

这是怎么做到的?什么是实时搜索和更新XML提供的列表对象的最快或最常用的方法?

1 个答案:

答案 0 :(得分:1)

就个人而言,除非你有理由将数据保存为xml,否则我会首先将xml列表转换为对象的arrayCollection。如果你在加载数据时这样做,它应该会给你一些更好的性能,特别是对于更大的数据集。

但是为了回答你的问题,我会做这样的事情:(这假设你将xml数据转换为一个名为_acData的arrayCollection,你有另一个名为_acFilteredData的arrayCollection,这是列表控件绑定的。一旦你加载将数据导入_acData,将其复制到_acFilteredData,然后将这样的函数附加到文本输入中)

private function inpFilter_change ( e:Event ) : void
{
    var searchString:String = StringUtil.trim(inpFilter.text).toLowerCase();

    if ( searchString.length )
    {
        var newAC:ArrayCollection = new ArrayCollection();

        for each ( var tempObject:Object in _acData)
        {
            if ( tempObject.countryName.toString().indexOf(searchString) != -1 )
            {
                newAC.addItem(tempObject);
            }
        }

        _acFilteredData = newAC;

        listControl.dispatchEvent(new ListEvent(ListEvent.CHANGE)); //might not be necessary, but will force the control to update  
    }
    else
    {
        _acFilteredData = _acData;
    }

}