`
longgangbai
  • 浏览: 7339132 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex类似Google搜索提示的两种做法思路

阅读更多

做了个简单的搜索提示程序,类似google之类的搜索提示,就是输入一个内容时,会把开头对得上的内容显示出来。下面可以看看:

 

 

呵呵,这里没有显示有多少条结果,当然也要做到统计也是可以的。这里只做简单的显示。
下面就说说两种做法。
第一种,是在用户输入提示信息的时候,把用户输入的信息跟应用中存的数据进行比较,找出匹配的数据,然后 在list组件里显示出来

view plaincopy to clipboardprint?
//输入文本内容变化事件  
            private function inputChangeEvent():void 
            {  
                //每次输入文字变化,都检索一下,查看数据是否变化  
                if(currMsg != searchText.text)  
                {  
                    currMsg = searchText.text;  
                    var seachData:ArrayCollection = new ArrayCollection();  
                    if(currMsg != "")  
                    {  
                        //在这里分析所有的内容,找出符合的内容  
                        for(var i:int = 0; i < source.length; i++)  
                        {  
                            //逐个检索,是否具有输入的内容,有则存放进去  
                            if(source[i].label.indexOf(currMsg) == 0)  
                            {  
                                seachData.addItem(source[i]);  
                            }  
                        }  
                    }  
                    //显示是否有相关的搜索相关信息,如果没有就显示默认信息  
                    if(seachData.length == 0)  
                    {  
                        seachData = defaultData;  
                    }  
                    //显示出与搜索相关的信息  
                    searchMsgList.visible = true;  
                    searchMsgList.dataProvider = seachData;  
                }  
            } 
恩,该函数是当输入文本框的内容有变化时触发的。代码的注释已经相当清晰了

接下来看另外一种处理发方法。其实大体的都差不多,这里只是对数据源刚传进来的时候,就马上对数据进行分析,归类,逐个分析,把具有相同内容的数据存放在一个数组里,最后把这些数据都和搜索内容捆绑,存放到一个集合里。所以当用户录入信息时,直接根据输入内容那分类好的数组就可以了
下面是传输数据源时的代码

view plaincopy to clipboardprint?
/**
    * 设置需要搜索的内容
    * @param:内容数组
    */  
   public function setSearchDatas(source:Array):void
   {
    //这里是数据一传递进来,就开始做分析
    //对这里里面的所有数据进行检索分类,以方便输入查询
    for(var i:int = 0; i < source.length; i++)
    {
     var key:String = source[i].label;
     //对字符串长度进行检索,并且分析,对每一个字符组合都存放起来
     for(var j:int = 1; j <= key.length; j++)
     {
      var str:String = key.substring(0,j);
      //从存放有相同标题的集合中取出来
      var strAry:ArrayCollection = searchMap[str] as ArrayCollection;
      if(strAry == null)
      {
       strAry = new ArrayCollection();
       searchMap[str] = strAry;
      }
      //存放完整的对象
      strAry.addItem(source[i]);
     }
    }
   }

然后下面是用户输入信息有变化时的相应函数

view plaincopy to clipboardprint?
//输入文本内容变化事件  
            private function inputChangeEvent():void 
            {  
                //每次输入文字变化,都检索一下,查看数据是否变化  
                if(currMsg != searchText.text && currMsg != "")  
                {  
                    currMsg = searchText.text;  
                    //显示是否有相关的搜索相关信息,如果没有就显示默认信息  
                    var strAry:ArrayCollection = searchMap[currMsg] as ArrayCollection;  
                    if(strAry == null)  
                    {  
                        strAry = defaultData;  
                    }  
                    //显示出与搜索相关的信息  
                    searchMsgList.visible = true;  
                    searchMsgList.dataProvider = strAry;  
                }  
            } 
最后总结一下,如果少量数据的话,应该都没什么区别。但是,如果有大量数据时,区别就来了。
第一方法比较简单,消耗的内存比较少,但是因为是即时分析数据源,所以搜索出来可能会稍微慢点。
第二种的话,因为实现已经分析好了,可以根据用户输入的内容马上从哈希表里取出对应数据。所以取数据反应会非常快。但是占用内存可能会多点(因为要根据每个字符串组合进行存放,不过其实也是增加多一些字符串,对象只是引用而已)。
同时还做一些细的优化,例如限制长度等等,至于怎么用,根据爱好了。如果数据量大的话,个人偏向第二种。这里的两种算法其实跟具体的CS3或者flex组件不相关的,只是用list来显示而已。
呵呵,当然如果你有更好的想法,欢迎讨论。

 

分享到:
评论

相关推荐

    flex 模拟 google搜索

    本项目聚焦于使用Flex来模拟Google的搜索功能,旨在提供类似Google搜索引擎的用户体验。下面将详细介绍如何利用Flex技术和相关知识来实现这一目标。 1. **Flex基础知识**:Flex是Adobe开发的用于构建桌面和Web应用...

    Flex中类似QQ新闻提示的控件

    Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件 Flex中类似QQ新闻提示的控件

    Flex文本框自动提示

    Flex文本框自动提示技术是基于Adobe Flex框架的一种用户体验优化功能,它允许用户在输入文本时获得即时的下拉建议或提示。这种功能在各种应用程序中非常常见,如搜索引擎、在线表单和数据输入界面,可以显著提高用户...

    flex 智能提示框

    Flex智能提示框是一种在用户输入时提供实时建议的交互元素,常见于搜索框或自动完成字段,能够极大地提升用户体验。这种技术主要应用于Flex框架中,它是一个基于Adobe AIR和Flash Player运行时的开源开发平台,用于...

    flex 鼠标进入显示提示信息

    在Flex开发中,有时我们需要为用户界面添加交互性,例如当鼠标悬停在某个元素上时显示相关的提示信息。这个场景在"flex 鼠标进入显示提示信息"的标题和描述中被提及,它涉及到如何创建一个动态的提示框,跟随鼠标的...

    flex智能提示 类似于百度引擎的智能提示

    这种功能类似于用户在百度搜索引擎中输入关键词时,搜索引擎会自动预测并显示可能的搜索词,极大地提高了编码效率和准确性。 Flex是一种基于ActionScript的开源框架,主要用于构建富互联网应用程序(RIA)。它提供...

    flex做的googlemaps

    标题中的“flex做的googlemaps”指的是使用Adobe Flex技术来开发Google Maps的应用程序。Flex是一种基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIA),它可以与Flash Player或Adobe AIR运行...

    flexDemo实现引擎搜索

    FlexDemo实现引擎搜索是一个以Adobe Flex技术为核心的项目,它展示了如何与Java 2 Enterprise Edition (J2EE)平台集成,创建一个类似于Google的搜索引擎。在这个Demo中,我们可以通过使用Flex前端展示用户界面,同时...

    Flex自动完成源代码[类似Google搜索自动完成功能].zip

    这个压缩包“Flex自动完成源代码[类似Google搜索自动完成功能].zip”包含了一个实现自动完成功能的Flex组件,这在许多Web应用中都非常常见,如搜索引擎、表单输入等,能够提升用户体验,帮助用户快速找到或输入目标...

    flex气泡效果提示

    "flex气泡效果提示"项目正是针对这一问题进行的改进,它引入了更人性化、更具吸引力的提示方式,即气泡提示,以替代原有的验证信息显示。 Flex是一种流行的开源框架,主要用于创建富互联网应用程序(RIA),尤其在...

    Flex项目Google IFrame使用

    在Flex项目开发中,有时我们需要将外部网页内容嵌入到我们的应用中,这时Google IFrame就成为了一个常用的选择。IFrame(Inline Frame)是HTML的一种元素,它允许我们在一个网页中嵌入另一个网页,这对于展示第三方...

    类似谷歌图片剪切的flex+java程序

    标题中的“类似谷歌图片剪切的flex+java程序”指的是一个基于Adobe Flex前端技术和Java后端服务构建的应用,它的功能类似于谷歌提供的图片上传和剪切服务。Flex是一种用于创建富互联网应用程序(RIA)的开源框架,它...

    flex 端实现分页的两种方法

    本篇文章将深入探讨在Flex端实现分页的两种方法。 第一种方法是基于客户端的分页。这种方法将所有的数据一次性从服务器获取,然后在客户端进行分页处理。在Flex中,可以利用ArrayCollection或XMLListCollection作为...

    flex 两个图片播放小程序

    在IT行业中,Flex是一种强大的开发框架,主要用于构建富互联网应用程序(RIA)。在这个“flex 两个图片播放小程序”项目中,我们可以看到它被用来创建一个图片浏览应用,支持图片的放大和缩小功能,提供了用户友好的...

    flex学习笔记 flex学习总结 flex学习教程

    1. **Flex基础**:Flex提供了MXML和ActionScript两种编程方式。MXML是一种声明式语言,用于定义界面布局和组件,而ActionScript则是面向对象的脚本语言,用于处理程序逻辑和交互。学习Flex首先要了解这两种语言的...

    Flex tree项目行上加toolTip提示(两种实现方式)

    有时候tree节点内容太长,就...用两种方式实现. 1.通过itemRollOver和itemRollOut,使用ToolTipManager自定义实现 2.树本身属性showDataTips,加了一些小优化。 http://www.zuidaima.com/share/1722980750003200.htm

    Flex文本框自动提示源码

    Flex文本框自动提示源码 用到Flex文本框自动提示的功能 设计思路 思路比较简单,组件分成两个部分,1文本框;2提示的下拉列表; 自动提示:  在文本框中输入文字时,在数据源(所有的提示项)查找匹配的选项,若...

    googleMap-Flex

    本项目“googleMap-Flex”聚焦于使用Google Map API在Flex环境中实现这一功能,Flex是一个用于构建富互联网应用(RIA)的开源框架,基于Adobe AIR和Flash Player运行时。 在Flex中使用Google Map API,首先需要获取...

    flex/flash自定义组件(搜索栏)

    在IT行业中,Flex和Flash是Adobe开发的两种用于创建富互联网应用程序(RIA)的技术。本文主要探讨如何在Flex中自定义组件,特别是针对一个搜索栏的实现。在提供的压缩包中,我们有`searchField.fla`、`searchField....

    Flex万年历记事本_flex源码

    1. **MXML与ActionScript**:Flex应用主要由两种语言编写,MXML用于定义组件结构和界面布局,而ActionScript则处理逻辑和业务代码。在"万年历记事本"的源码中,MXML文件可能包含了日历视图和记事本界面的定义,而...

Global site tag (gtag.js) - Google Analytics