CN110989981B - 一种筛选控件 - Google Patents

Abstract

本申请提供了一种筛选控件，包括：控件框组件、菜单组件和搜索组件，其中，控件框组件用于展示控件框，菜单组件用于展示包括搜索框和若干选项的下拉菜单，当用户想要搜索需要的数据时，可方便地在下拉菜单中的搜索框中输入关键词，从而使得搜索组件基于关键词快速搜索到用户想要的数据，并且，由于搜索框设置于下拉菜单中，因此，用户很容易发现筛选组件的筛选功能，另外，菜单组件在接收到菜单激活指令时，展示下拉菜单，并且仅在接收到菜单收起指令时才会将下拉菜单收起，这使得用户可在下拉菜单中完成所有选项的选择行为，不需要频繁的激活下拉菜单，简化了用户的操作，提升了用户体验。

Description

一种筛选控件

技术领域

本申请涉及数据筛选领域，尤其涉及一种筛选控件。

背景技术

在日常的工作和生活中，经常需要从数据库存储的海量的信息中筛选出需要的数据。例如，在广告业务数据分析中，需要从后端数据库存储的众多的广告主中筛选出所需广告主，例如筛选出与某关键词相关的广告主。由于广告业务数据具有数据量大、字段长的特点，查找难度很大。因此，亟需一种筛选效率较高的筛选控件。

发明内容

有鉴于此，本申请提供了一种筛选控件，用以快速筛选出用户所需数据，其技术方案如下：

一种筛选控件，包括：控件框组件、菜单组件和搜索组件；

所述控件框组件，用于展示控件框；

所述菜单组件，用于在接收到菜单激活指令时，展示第一状态下的下拉菜单；以及满足第一切换条件时，将所述第一状态下的下拉菜单切换为第二状态下的下拉菜单；以及在接收到菜单收起指令时，将所述下拉菜单收起；其中，所述第一状态下的下拉菜单和所述第二状态下的下拉菜单均包括搜索框和若干选项，所述第二状态下的下拉菜单中的选项与所述第一状态下的下拉菜单中的选项不同，所述第一切换条件为检测到所述第一状态下的下拉菜单中的搜索框输入关键词；

所述控件框组件，还用于在所述控件框中展示选项信息，其中，所述选项信息为所述下拉菜单中已选选项的相关信息；

所述搜索组件，用于搜索与所述搜索框中输入的关键词相关的选项。

优选地，所述筛选控件具有第一模式和第二模式，当后端数据库中选项的数量小于或等于预设数量时，所述筛选控件处于所述第一模式，当所述后端数据库中选项的数量大于所述预设数量时，所述筛选控件处于所述第二模式；

在所述第一模式下，所述筛选控件预先从所述后端数据库中获取选项；在所述第二模式下，所述筛选控件不预先从所述后端数据库中获取选项，当需要针对所述搜索框中输入的关键词进行搜索时，再从所述后端数据库中获取与所述关键词相关的选项。

优选地，当所述筛选控件处于所述第一模式时，所述第一状态下的下拉菜单中的若干选项包括：第一选项、第二选项和至少一个第三选项；

其中，所述第一选项用于选取所有具体选项的汇总数据，所述第二选项用于选取所有的具体选项，所述第三选项为具体选项；在所述第一模式下，所述筛选控件预先从所述后端数据库中获取所述至少一个第三选项；

所述菜单组件，用于在没有任何选项被选取的前提下，若所述第二选项被选取，则选取所有的第三选项；以及，在所述第一选项被选取的前提下，若所述第二选项被选取，则选取所有的第三选项，并对所述第一选项取消选取；以及，在所述第二选项以及所有的第三选项被选取的前提下，若所述第一选项被选取，则对所述第二选项以及所有的第三选项取消选取；以及，在所述第一选项被选取的前提下，若部分第三选项被选取，则对所述第一选项取消选取。

优选地，当所述筛选控件处于所述第二模式时，所述第一状态下的下拉菜单中的若干选项包括：第一选项和第二选项，其中，所述第一选项用于选取所有具体选项的汇总数据，所述第二选项用于选取所有的具体选项；

所述菜单组件，用于在所述第一选项被选取的前提下，若所述第二选项被选取，则对所述第一选项取消选取；以及，在所述第二选项被选取的前提下，若所述第一选项被选取，则对所述第二选项取消选取。

优选地，所述第二状态下的下拉菜单中的若干选项包括：第四选项和至少一个第五选项，其中，所述至少一个第五选项为与所述关键词相关的选项，所述第四选项用于选取所有的第五选项；

所述菜单组件，用于当所述第四选项被选取时，选取所有的第五选项；以及，当所有的第四选项被选取时，选取所述第五选项。

优选地，所述菜单组件，用于将用户在所述下拉菜单中选取的选项置于未选取选项的上方显示。

优选地，所述控件框组件，用于当所述下拉菜单中选取的选项发生变化时，更新所述控件框中显示的选项信息。

优选地，所述菜单组件，用于当检测到所述第二状态下的搜索框中的关键词被删除时，将所述第二状态下的下拉菜单切换为所述第一状态下的下拉菜单。

优选地，所述控件框组件，用于在所述控件框中展示选项信息时，显示用于将所述控件框中的所有选项信息删除的删除按钮；以及，当检测到针对所述删除按钮的触发指令时，删除所述控件框内所有的选项信息。

优选地，所述控件框组件，用于在所述控件框中展示的所有选项信息被删除时，若检测到查询指令，则在所述控件框内填入预设选项的相关信息，并查询所述预设选项。

经由上述方案可知，本申请提供的筛选控件包括控件框组件、菜单组件和搜索组件，其中，控件框组件用于展示控件框，菜单组件用于展示包括搜索框和若干选项的下拉菜单，当用户想要搜索需要的数据时，可方便地在下拉菜单的搜索框中输入关键词，以便搜索组件基于关键词快速搜索到用户想要的数据，并且，由于搜索框设置于下拉菜单中，因此，用户很容易发现筛选组件的筛选功能，另外，菜单组件在接收到菜单激活指令时，展示下拉菜单，并且仅在接收到菜单收起指令时才会将下拉菜单收起，这使得用户可在下拉菜单中完成所有选项的选择行为，不需要频繁的激活下拉菜单，简化了用户的操作，提升了用户体验。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请实施例提供的筛选控件所展示的控件框及下拉菜单的示意图；

图2a-2c为本申请实施例提供的筛选控件的一种实现场景示意图；

图3为筛选控件处于第二模式时，第一状态下的下拉菜单示意图；

图4a-4b为一种可选的置顶展示已选选项的过程示意图；

图4c-4d为另一种可选的置顶展示已选选项的过程示意图；

图5a-5b为更新控件框中显示的选项信息的过程示意图；

图6a-6c为通过删除按钮删除已选选项对应的选项信息的过程示意图；

图7a-7c为本申请实施例提供的筛选控件查询已选选项的过程示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

为了使用户能够从后端数据库存储的大量数据中快速筛选出所需要的数据，本案发明人进行了研究：

起初的思路为：考虑到通过搜索的方式能够快速从后端数据库存储的大量数据中找到用户所需的数据，可在筛选控件中设置搜索框，从而使得用户在需要查找信息时，可以在搜索框输入关键词，以便筛选控件筛选出与关键词相关的数据并在下拉菜单中展示，该方案可以达到快速筛选出用户所需数据的目的。

但是，本案发明人通过深入研究发现：上述方案中，将输入框设置于控件框中，使得用户难以发现搜索框，并且，本案发明人还发现，用户在进行多选操作时，需重复点击控件框以激活下拉菜单，操作非常繁琐，需要说明的是，用户之所以需要频繁操作是因为，用户每选择下拉菜单中的一个选项后，下拉菜单会自动收起，并自动清空搜索关键词。

鉴于上述思路存在的问题，本案发明人进一步进行研究，最终提出了一种筛选控件，该筛选控件可应用于终端，终端可以但不限定为台式机、移动终端(例如智能手机)、ipad等。接下来通过下述实施例对本申请提供的筛选控件进行介绍。

本申请实施例提供的筛选控件可以包括：控件框组件、菜单组件和搜索组件，各部分具体功能介绍如下：

第一，上述控件框组件用于展示如图所示的控件框1。

本申请实施例对筛选控件包含的控件框组件展示的控件框1的数目不做具体限制，可以根据实际需要设置一个或多个控件框1，其中每一控件框1用于展示信息的一个维度，从而用户可以从多个维度对信息进行筛选。例如，控件框组件用于展示″广告位ID(Identity Document，身份标识号)″和″计价类型″两个控件框1，那么用户可以从″广告位ID″和″计价类型″这两个维度对点击数进行筛选。

第二，上述菜单组件用于在接收到菜单激活指令时，展示第一状态下的下拉菜单2；以及满足第一切换条件时，将第一状态下的下拉菜单2切换为第二状态下的下拉菜单2；以及在接收到菜单收起指令时，将下拉菜单2收起。

其中，第一状态下的下拉菜单2和第二状态下的下拉菜单2均包括搜索框21和若干选项22，第二状态下的下拉菜单2中的选项与第一状态下的下拉菜单2中的选项22不同，第一切换条件为检测到第一状态下的下拉菜单2中的搜索框21输入关键词。

可选的，筛选控件可以生成菜单激活指令，以便激活下拉菜单2，相应的，筛选控件还可以生成菜单收起指令，以便将下拉菜单2收起。

本申请实施例中菜单激活指令以及菜单收起指令可以有多种生成方式，这里提供但不限于以下几种菜单激活指令的生成方式：

第一种，用户触发筛选控件的第一指定位置，筛选控件生成菜单激活指令；可选的，用户可以通过鼠标、键盘等设备点击第一指定位置，以使得筛选控件生成菜单激活指令，也可以在终端的触控屏上触按第一指定位置，以使得筛选控件生成菜单激活指令。例如，如图1所示，用户触按控件框1，筛选控件生成菜单激活指令。

第二种，用户发出第一语音信息，筛选控件生成菜单激活指令。

第三种，用户输入第一预设手势，筛选控件捕捉到该第一预设手势后，生成菜单激活指令。

同理，对于菜单收起指令的生成方式，可以参照菜单激活指令的生成方式，本申请不再详细赘述。示例性的，用户触发筛选控件的第二指定位置，可以生成菜单收起指令，这里第一指定位置和第二指定位置可以相同也可以不同；示例性的，用户触发筛选控件之外的任意位置，例如空白位置，可以生成菜单收起指令。

在一可选实施例中，可以将搜索框设置在选项的上方显示，以使得用户比较容易发现筛选控件的搜索功能。可选的，搜索框中可以设置有文字显示，或，图标显示，或文字和图标结合显示等。示例性的，如图1所示，搜索框中包括文字″搜索关键词查看具体选项″，从而用户可以通过该文字显示，方便获知该搜索框的具体功能。

值得注意的是，本申请实施例中下拉菜单包含的选项所展示的内容具体根据用户所选择的控件框确定，例如，若菜单激活指令是基于维度1对应的控件框1生成的，那么下拉菜单包含的选项所展示的内容与维度1相关；若菜单激活指令是基于维度2对应的控件框1生成的，那么下拉菜单包含的选项所展示的内容与维度2相关。

需要说明的是，本申请并不对第一状态下的下拉菜单包含的选项的数目，以及，第二状态下的下拉菜单包含的选项的数目进行限定，具体可以根据实际情况确定。

第三，上述控件框组件除用于展示控件框1之外，还用于在控件框中展示选项信息，其中，选项信息为下拉菜单2中已选选项的相关信息。

可选的，已选选项的相关信息可以包括但不限于：用户选择的下拉菜单展示的选项(即已选选项)以及用于指示已选选项的数目的信息。

第四，上述搜索组件用于搜索与搜索框21中输入的关键词相关的选项。

可选的，与关键词相关的选项可以为包含该关键词的选项。

下面通过一示例对上述的筛选控件进行说明：

请参阅附图2a-2c，为本申请实施例提供的筛选控件的一种实现场景示意图。筛选控件可以应用于广告业务数据分析场景中，如图2a-2c所示，筛选控件可以基于计价类型维度对点击数进行筛选。图2a中，控件框组件用于展示计价类型维度的控件框1，此时下拉菜单包括的搜索框中无关键词输入，该下拉菜单为第一状态下的下拉菜单，该下拉菜单除包括搜索框外，还包括 6个选项；用户在图2a所示搜索框中输入关键词″D″，则搜索框组件可以搜索第一状态下的下拉菜单展示的选项中，与关键词″D″相关的选项，从而菜单组件检测到有关键词输入，则将图2a所示第一状态下的下拉菜单2切换为图2b所示的第二状态下的下拉菜单2；进而用户点击图2b中选项″CPD″，则可以切换至图2c所示，下拉菜单中″CPD″处于已选状态，并且在控件框中展示已选选项″CPD″。

本申请实施例提供的筛选控件包括控件框组件、菜单组件和搜索组件，其中，控件框组件用于展示控件框，菜单组件用于展示包括搜索框和若干选项的下拉菜单，当用户想要搜索需要的数据时，可方便地在下拉菜单的搜索框中输入关键词，以便搜索组件基于关键词快速搜索到用户想要的数据，并且，由于搜索框设置于下拉菜单中，因此，用户很容易发现筛选组件的筛选功能，另外，菜单组件在接收到菜单激活指令时，展示下拉菜单，并且仅在接收到菜单收起指令时才会将下拉菜单收起，这使得用户可在下拉菜单中完成所有选项的选择行为，不需要频繁的激活下拉菜单，简化了用户的操作，提升了用户体验。

以下对上述实施例中第一状态下的下拉菜单中的若干选项，以及，第二状态下的下拉菜单中的若干选项进行介绍。

第一，第一状态下的下拉菜单中的若干选项。

可选的，本申请实施例提供的筛选控件可以具有第一模式，在该第一模式下，筛选控件预先从后端数据库中获取选项并存储至本地，从而在需要对选项进行筛选时，对预先存储至本地的选项进行筛选。

在筛选控件处于第一模式时，第一状态下的下拉菜单中的若干选项可以包括：第一选项、第二选项和至少一个第三选项，其中，筛选控件预先从后端数据库中获取至少一个第三选项。

需要说明的是，上述的第三选项为具体选项，第一选项用于选取所有具体选项的汇总数据，第二选项用于选取所有的具体选项。

例如，至少一个第三选项分别为广告A、广告B、广告C、广告D，其中用户选择广告A，可以查询广告A的用户点击量，假设为1000；用户选择广告B，可以查询广告B的用户点击量，假设为2000；用户选择广告C，可以查询广告C的用户点击量，假设为3000；用户选择广告D，可以查询广告D 的用户点击量，假设为4000。那么，第一选项为广告A、广告B、广告C、广告D的汇总，即用户选择第一选项，可以查询广告A、广告B、广告C、广告D的用户点击量的总和，即10000；第二选项用于选取所有的广告A、广告B、广告C、广告D，即用户选择第二选项，可以同时查询广告A的用户点击量(即1000)、广告B的用户点击量(即2000)、广告C的用户点击量(即3000)、广告D的用户点击量(即4000)。

需要说明的是，在本实施例中，下拉菜单中的第一选项、第二选项和至少一个第三选项之间具有逻辑关系，具体的，在没有任何选项被选取的前提下，若第二选项被选取，则选取所有的第三选项；以及，在第一选项被选取的前提下，若第二选项被选取，则选取所有的第三选项，并对第一选项取消选取；以及，在第二选项和所有的第三选项被选取的前提下，若第一选项被选取，则对第二选项以及所有的第三选项取消选取；以及，在第一选项被选取的前提下，若部分第三选项被选取，则对第一选项取消选取。

示例性的，仍参见图2a所示，筛选控件处于第一模式时，第一状态下的下拉菜单2包括选项″全部″、″明细″、″CPD″、″CPM″、″CPC″以及″DCPM″，其中，″全部″为第一选项，″明细″为第二选项，″CPD″、″CPM″、″CPC″、″DCPM″均为第三选项，即具体选项，在没有任何选项被选取的前提下，若用户选取″明细″，则″CPD″、″CPM″、″CPC″、″DCPM″全部被自动选取；在″全部″被选取的前提下，若用户选取″明细″，则″CPD″、″CPM″、″CPC″、″DCPM″全部被自动选取，并且″全部″自动取消选取；在″明细″、″CPD″、″CPM″、″CPC″、″DCPM″被选取的前提下，若用户选取″全部″，则″明细″、″CPD″、″CPM″、″CPC″、″DCPM″自动取消选取；在″全部″被选取的前提下，若用户选取″CPD″和″CPM″，则″全部″自动取消选取。

考虑到后端数据库中存储的选项的数目较多时，若筛选控件预先将后端数据库中的选项存储至本地，可能会出现筛选页面加载卡顿的现象，基于此，筛选控件还可以具有第二模式，在该第二模式下，筛选控件不预先从后端数据库中获取选项并存储至本地，而是需要针对搜索框中输入的关键词进行搜索时，直接从后端数据库中获取与关键词相关的选项。

结合上文描述，由于筛选控件处于第二模式时，不会预先从后端数据库中获取选项并存储至本地，即筛选控件不会预先从后端数据库中获取至少一个第三选项，因此，第一状态下的下拉菜单中的若干选项可以仅包括：第一选项和第二选项，其中，第一选项用于选取所有具体选项的汇总数据，第二选项用于选取所有的具体选项。这里的第一选项和第二选项与上述第一模式下的第一选项和第二选项相同，详细可参照前述描述，这里不再重复赘述。

那么与上文对应，在选取第一选项和第二选项时，各选项之间的逻辑关系可以包括：在第一选项被选取的前提下，若第二选项被选取，则对第一选项取消选取；以及，在第二选项被选取的前提下，若第一选项被选取，则对第二选项取消选取。

示例性的，如图3所示，为本申请实施例提供的筛选控件处于第二模式时，第一状态下的下拉菜单2的示意图。该下拉菜单2包括选项第一选项和第二选项，其中，第一选项为″全部″，第二选项为″明细″，在″全部″被选取的前提下，若用户选取″明细″，则″全部″自动取消选取；在″明细″被选取的前提下，若用户选取″全部″，则″明细″自动取消选取。

需要说明的是，在本申请实施例中，筛选控件可以仅具有第一模式，也可以仅具有第二模式，还可以既具有第一模式又具有第二模式，若筛选控件既具有第一模式又具有第二模式，则当后端数据库中选项的数量小于或等于预设数量时，筛选控件处于第一模式，当后端数据库中选项的数量大于预设数量时，筛选控件处于第二模式。其中，预设数量可以根据实际需要确定，例如预设数量可以是1000。

第二，第二状态下的下拉菜单中的若干选项。

前述内容提到，当下拉菜单中的搜索框中输入关键词时，菜单组件将第一状态下的下拉菜单切换为第二状态下的下拉菜单。需要说明的是，无论筛选控件处于第一模式还是第二模式，第二状态下的下拉菜单都需要展示与输入的关键词相关的选项。

可选的，第二状态下的下拉菜单中的若干选项可以包括：第四选项和至少一个第五选项，其中，至少一个第五选项为与关键词相关的选项，第四选项用于选取所有的第五选项。

在一可选实施例中，在选取第四选项和至少一个第五选项时，各选项之间具有逻辑关系，具体的，当第四选项被选取时，选取所有的第五选项；以及，当所有的第四选项被选取时，选取第五选项。

示例性的，仍参见图2b或图2c所示，第二状态下的下拉菜单2包括选项″全选″、″CPD″、″DCPM″。其中，″全选″为第四选项，″CPD″、″DCPM″均为第五选项。那么，用户选取″全选″，则″CPD″、″DCPM″自动被选取；用户选取″CPD″和″DCPM″，则″全选″自动被选取。

综上，用户可以在第二状态下的下拉菜单中选取多个第五选项，提高了选取选项时的效率。进一步，由于第二状态下的下拉菜单中的若干选项包括用于选取全部第五选项的第四选项，因此，用户无需逐个选取第五选项，而只要选取第四选项即可完成全部第五选项的选取操作，进一步提高了选项的选取效率。

除上述实施例提及的筛选控件的功能外，筛选控件还有以下几个功能，接下来分别进行介绍。

第一，已选选项置顶功能

作为本申请的一个实施例，菜单组件可以用于将用户在下拉菜单中选取的选项置于未选取选项的上方显示，即已选选项置顶显示。

这里的下拉菜单可以是第一状态下的下拉菜单，也可以是第二状态下的下拉菜单。

示例性的，参见图4a-4b，为一种可选的置顶展示已选选项的过程示意图。图4a中，第一状态下的下拉菜单中的选项从上至下分别为″选项1″、″选项2″、″选项3″、″选项4″其中，选项1和选项4中均包括关键词″X″，用户可以在该下拉菜单中选取″选项3″和″选项4″，然后在搜索框输入关键词″X″，那么可以得到图4b所示第二状态下的下拉菜单，该下拉菜单中″选项4″会置于″选项1″的上方显示。

可选的，若下拉菜单中的若干选项包括特殊选项(比如前述内容提及的″全选″选项和″明细″选项)和具体选项，则在特殊选项与具体选项中，特殊选项位于具体选项的上方显示；在具体选项中，用户选取的具体选项位于未选取的具体选项的上方显示。

示例性的，参见图4c-4d，为另一种可选的置顶展示已选选项的过程示意图。图4c中，第一状态下的下拉菜单中的选项从上至下分别为″全部″、″明细″、″选项1″、″选项2″、″选项3″、″选项4″，其中，选项1 和选项4中均包括关键词″X″，用户可以在该下拉菜单中选取″选项3″和″选项4″，然后在搜索框输入关键词″X″，那么可以得到图4b所示第二状态下的下拉菜单，该下拉菜单中″选项4″会置于″选项1″的上方显示，并且″全选″置于″选项4″的上方显示。

本申请实施例中，已选选项置顶显示，使得筛选控件更合理地展示用户选取的选项和未选取选项，页面在视觉上更加整齐；并且，已选选项置顶显示能够给予用户明确提示，用户可以更方便地获取其已经选择的信息。

第二，在控件框中更新显示选项信息的功能

作为本申请的另一可选实施例，控件框组件可以用于当下拉菜单中选取的选项发生变化时，更新控件框中显示的选项信息。

本申请实施例中，已选选项(即选取的选项)除了可以在下拉菜单置顶显示，还可以在控件框显示。可选的，已选选项对应的选项信息可以在控件框以省略标签形式展示。省略标签形式是指：若已选选项的数量为1个，控件框可以显示该已选选项，可选的，控件框可以仅显示该已选选项的部分字段；若已选选项的数量大于1个，控件框可以显示两个标签，其中第一个标签用于显示一个已选选项，第二个标签用于显示已选选项的数量信息。可选的，第一个标签可以仅显示一已选选项的部分字段，这里，部分字段的字段长度可以根据第一个标签所占用的长度确定。可选的，第二个标签显示的已选选项的数量信息可以以″+N″的形式显示，其中，N为已选选项的总数量减去1，表征下拉菜单中已选选项的数量为N+1。

示例性的，已选选项仅有1个的情况可以参见图2b-2c，由于没有选取的选项，因此图2b所示控件框也不会显示选项信息，用户在图2b所示下拉菜单中选取″CPD″，得到图2c，下拉菜单中″CPD″被选取的同时，控件框中也会更新选项信息，即″CPD″。

示例性的，已选选项的数量大于1个的情况可以参见图5a-5b所示。图 5a中，下拉菜单仅包含一个已选选项″选项1″，由于该已选选项字段较长，因此控件框仅能显示其部分字段″X″；用户在图5a所示下拉菜单中选取″选项2″，得到图5b，下拉菜单中″选项2″被选取的同时，控件框中也会更新选项信息，即第一个标签显示″X″，第二个标签显示″+1″。

本申请实施例中，控件框更新显示已选选项对应的选项信息，能够给予用户明确提示，用户可以更方便地获取其已经选择的信息。

第三，一键删除功能

在一可选实施例中，控件框组件可以用于在控件框中展示选项信息时，显示用于将控件框中的所有选项信息删除的第一删除按钮；以及，当检测到针对第一删除按钮的触发指令时，删除控件框内所有的选项信息。

需要说明的是，当检测到针对删除按钮的触发指令时，删除控件框内所有的选项信息的同时，对应的下拉菜单中的已选选项也会自动取消选择。

可选的，控件框组件可以用于在控件框中展示选项信息时，显示用于将控件框中第一个标签中选取的选项删除的第二删除按钮；以及，当检测到针对第二删除按钮的触发指令时，删除第一个标签中选取的选项，并且，第二一个标签中显示的数量信息对应减1。

需要说明的是，当检测到针对第二删除按钮的触发指令时，删除第一个标签中选取的选项后，第一个标签中会显示另一选取的选项，并显示用于删除该另一选取的选项的第二删除按钮。

示例性的，参见图6a-6c为通过删除按钮删除已选选项对应的选项信息的过程示意图。图6a中，已选选项包括″CPD″、″CPM″、″CPC″，控件框中第一个标签显示″CPD″以及用于删除″CPD″的第二删除按钮，第二个标签显示″+2″，此外控件框还显示有第一删除按钮；用户点击第二删除按钮，可以删除第一个标签显示的″CPD″，得到图6b，下拉菜单中″CPD″对应取消选择，并且，控件框第一个标签处显示″CPM″，第二个标签显示″+1″，表征下拉菜单中还有2个已选选项；用户点击第一删除按钮，可以删除控件框内所有的选项信息，得到图6c，下拉菜单中所有已选选项自动取消选择，并且控件框中也不显示任何已选选项对应的选项信息。

第四，下拉菜单的状态切换功能

上文实施例已经说明了，菜单组件可以用于满足第一切换条件时，将第一状态下的下拉菜单切换为第二状态下的下拉菜单。

应当理解，第二状态下的下拉菜单中展示有针对关键词的搜索结果，其中的第五选项为与关键词相关的选项，第四选项用于选取所有的第五选项，因此若第二状态下的搜索框中的关键词被删除，表征用户当前不需要进行搜索或者需要重新进入搜索，因此，可以将第二状态下的下拉菜单切换为第一状态下的下拉菜单。也即可选的，本实施例中，菜单组件还可以用于当检测到第二状态下的搜索框中的关键词被删除时，将第二状态下的下拉菜单切换为第一状态下的下拉菜单。

第五，追加选择功能

本申请实施例中，用户可以多次在搜索框输入关键词，进行选项的追加选择。例如，在第一状态下的下拉菜单的搜索框输入″北京″，用户可在第二状态下的下拉菜单选取″北京″相关的选项；用户将第二状态下的下拉菜单的搜索框中的关键词删除，第二状态下的下拉菜单切换为第一状态下的下拉菜单；用户再次在第一状态下的下拉菜单的搜索框输入″上海″，用户可在第二状态下的下拉菜单选取″上海″相关的选项，那么筛选控件中的已选选项为：选取的″北京″相关的选项和选取的″上海″相关的选项。

第六，查询功能

在业务分析等场景中，筛选控件的下拉菜单中通常不会直接展示业务数据，而是展示一些与业务数据相关的选项，通过对选取的选项进行查询可以得到与选项相关的业务数据。因此在一可选实施例中，本申请实施例还可以具有查询功能，从而控件框组件用于若检测到查询指令，则对选取的选项进行查询。

可选的，控件框组件还可以用于在控件框中展示的所有选项信息被删除时，若检测到查询指令，则在控件框内填入预设选项的相关信息，并查询预设选项。

上述查询指令可以是用户点击查询按键生成的，当然本申请并不限定该生成方式。

可选的，可以在菜单组件接收到菜单收起指令并将下拉菜单收起后，控件框组件若检测到查询指令，则对选取的选项或者预设选项进行查询。

例如图7a-7c所示，为本申请实施例提供的筛选控件查询已选选项的过程示意图。图7a中，从″广告位ID″和″计价类型″两个维度对点击数进行筛选，其中″广告位ID″对应的控件框1为″全部″，表征需要在″广告位ID″维度查询全部点击数，″计价类型″对应的控件框1为″CPD″和″CPM″，表征需要在″计价类型″维度查询″CPD″和″CPM″的点击数，用户点击″查询″按键，可以查询得到图7a所示的表格；用户可以点击第一删除按钮，可以将″计价类型″对应的控件框中展示的所有选项信息删除，得到图7b；图7b中，″计价类型″对应的控件框内无选项，若此时用户点击″查询″按键，则可以在″计价类型″对应的控件框内默认填入预设选项，例如填入的预设选项为″全部″，表征从″计价类型″以及″广告立ID″两个维度查询全部点击数，得到图7c所示表格。

第七，突出显示功能

可选的，可以在菜单组件接收到菜单激活指令时，将控件框1突出显示；在菜单组件接1收到菜单收起指令时，取消对控件框1的突出显示。可选的，可以在用户点击搜索框以输入关键词时，将搜索框突出显示，以使得用户及时获知当前可以在搜索框输入关键词进行搜索。

上述对控件框1以及搜索框21进行突出显示的方式有多种，本申请提供但不限于以下两种：

第一种，将控件框1或者搜索框21的边框加粗显示。

第二种，变换控件框1或者搜索框21的边框颜色。

例如，用户可以点击控件框1，那么该控件框1可以获得焦点，并且该点击操作可以作为生成菜单激活指令的方式使得下拉菜单展开，此时控件框1 的边框由灰色变为蓝色；当用户点击空白处或者点击控件框中的收起箭头时，可以生成菜单收起指令以使得下拉菜单收起，此时控件框1的边框由蓝色变为灰色。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个......”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种筛选控件，其特征在于，包括：控件框组件、菜单组件和搜索组件；

所述控件框组件，用于展示控件框；

所述菜单组件，用于在接收到菜单激活指令时，展示第一状态下的下拉菜单；以及满足第一切换条件时，将所述第一状态下的下拉菜单切换为第二状态下的下拉菜单；以及在接收到菜单收起指令时，将所述下拉菜单收起；其中，所述第一状态下的下拉菜单和所述第二状态下的下拉菜单均包括搜索框和若干选项，所述第二状态下的下拉菜单中的选项与所述第一状态下的下拉菜单中的选项不同，所述第一切换条件为检测到所述第一状态下的下拉菜单中的搜索框输入关键词；

所述控件框组件，还用于在所述控件框中展示选项信息，其中，所述选项信息为所述下拉菜单中已选选项的相关信息；

所述搜索组件，用于搜索与所述搜索框中输入的关键词相关的选项。

2.根据权利要求1所述的筛选控件，其特征在于，所述筛选控件具有第一模式和第二模式，当后端数据库中选项的数量小于或等于预设数量时，所述筛选控件处于所述第一模式，当所述后端数据库中选项的数量大于所述预设数量时，所述筛选控件处于所述第二模式；

在所述第一模式下，所述筛选控件预先从所述后端数据库中获取选项；在所述第二模式下，所述筛选控件不预先从所述后端数据库中获取选项，当需要针对所述搜索框中输入的关键词进行搜索时，再从所述后端数据库中获取与所述关键词相关的选项。

3.根据权利要求2所述筛选控件，其特征在于，当所述筛选控件处于所述第一模式时，所述第一状态下的下拉菜单中的若干选项包括：第一选项、第二选项和至少一个第三选项；

其中，所述第一选项用于选取所有具体选项的汇总数据，所述第二选项用于选取所有的具体选项，所述第三选项为具体选项；在所述第一模式下，所述筛选控件预先从所述后端数据库中获取所述至少一个第三选项；

所述菜单组件，用于在没有任何选项被选取的前提下，若所述第二选项被选取，则选取所有的第三选项；以及，在所述第一选项被选取的前提下，若所述第二选项被选取，则选取所有的第三选项，并对所述第一选项取消选取；以及，在所述第二选项以及所有的第三选项被选取的前提下，若所述第一选项被选取，则对所述第二选项以及所有的第三选项取消选取；以及，在所述第一选项被选取的前提下，若部分第三选项被选取，则对所述第一选项取消选取。

4.根据权利要求2所述筛选控件，其特征在于，当所述筛选控件处于所述第二模式时，所述第一状态下的下拉菜单中的若干选项包括：第一选项和第二选项，其中，所述第一选项用于选取所有具体选项的汇总数据，所述第二选项用于选取所有的具体选项；

所述菜单组件，用于在所述第一选项被选取的前提下，若所述第二选项被选取，则对所述第一选项取消选取；以及，在所述第二选项被选取的前提下，若所述第一选项被选取，则对所述第二选项取消选取。

5.根据权利要求1所述筛选控件，其特征在于，所述第二状态下的下拉菜单中的若干选项包括：第四选项和至少一个第五选项，其中，所述至少一个第五选项为与所述关键词相关的选项，所述第四选项用于选取所有的第五选项；

所述菜单组件，用于当所述第四选项被选取时，选取所有的第五选项；以及，当所有的第四选项被选取时，选取所述第五选项。

6.根据权利要求1所述筛选控件，其特征在于，所述菜单组件，用于将用户在所述下拉菜单中选取的选项置于未选取选项的上方显示。

7.根据权利要求1所述筛选控件，其特征在于，所述控件框组件，用于当所述下拉菜单中选取的选项发生变化时，更新所述控件框中显示的选项信息。

8.根据权利要求1所述筛选控件，其特征在于，所述菜单组件，用于当检测到所述第二状态下的搜索框中的关键词被删除时，将所述第二状态下的下拉菜单切换为所述第一状态下的下拉菜单。

9.根据权利要求1所述筛选控件，其特征在于，所述控件框组件，用于在所述控件框中展示选项信息时，显示用于将所述控件框中的所有选项信息删除的删除按钮；以及，当检测到针对所述删除按钮的触发指令时，删除所述控件框内所有的选项信息。

10.根据权利要求1所述筛选控件，其特征在于，所述控件框组件，用于在所述控件框中展示的所有选项信息被删除时，若检测到查询指令，则在所述控件框内填入预设选项的相关信息，并查询所述预设选项。

Images