CN103885943B - 网页中的下拉列表框控件的实现方法 - Google Patents

Abstract

本发明提供了一种网页中的下拉列表框控件的实现方法，包括：下拉列表框控件的文本框接受检索式的输入；触发下拉列表框控件的下拉列表，下拉列表仅呈现符合检索式的选项；选项接受选择，并触发相应的事件。本发明提高了网页的操作效率。

Description

网页中的下拉列表框控件的实现方法

技术领域

本发明涉及网页编程领域，具体而言，涉及一种网页中的下拉列表框控件的实现方法。

背景技术

下拉列表框是web编程中一种非常常见的控件，编程实现容易，其操作方式也简单：通过点击下拉箭头展开选项面板，其选项面板包含通过控件与数据源绑定的方式加载了大量不同的选项，进一步通过点击选项来确定属性值。

常规下拉列表框的上述功能能够满足普通用户的要求，表现为使用向导性非常强：在录入信息的过程中，用户不用思考应该如何填写数据，而是直接选择一项合适的数据即可，所以用户也比较习惯于这种操作方式。

然而，对于专业的信息录入人员来说，常规下拉列表框的上述功能太弱了。专业用户相对来说比较熟悉系统，对于大多数属性及其选项都很了解，而且在工作繁忙的情况下，更倾向于键盘操作，而不是靠鼠标晃动来完成自己希望的操作。尤其在数据项记录较多情况下，用鼠标点击起来非常别扭和费时，这种情况下传统的下拉列表框实现方式就更降低了专业用户的工作效率。

发明内容

本发明旨在提供一种下拉列表框控件的实现方法，以解决上述的问题。

在本发明的实施例中，提供了一种网页中的下拉列表框控件的实现方法，包括：下拉列表框控件的文本框接受检索式的输入；触发下拉列表框控件的下拉列表，下拉列表仅呈现符合检索式的选项；选项接受选择，并触发相应的事件。

本实施例的下拉列表框控件因为采用采用检索式来选择选项，所以避免了鼠标操作，提高了网页的操作效率。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1示出了根据本发明实施例的一种网页中的下拉列表框控件的实现方法的流程图；

图2-图16根据本发明实施例的下拉列表框控件的各种操作的屏幕截图。

具体实施方式

下面将参考附图并结合实施例，来详细说明本发明。

图1示出了根据本发明实施例的一种网页中的下拉列表框控件的实现方法的流程图，包括：

步骤S10，下拉列表框控件的文本框接受检索式的输入；

步骤S20，触发下拉列表框控件的下拉列表，下拉列表仅呈现符合检索式的选项；

步骤S30，选项接受选择，并触发相应的事件。

现有技术的下拉列表框要靠鼠标晃动来完成自己希望的操作，而本实施例允许通过检索式的输入来完成操作，从而方便用户用键盘操作，显著地提高了操作效率。

例如，若选项范围较大时，面板选项不但与屏幕一样高，而且还有滚动条，此时用户选择起来很不方便。而输入检索式就避免了拉动滚动条的操作，操作更加便捷。

另外，若选项范围较大时，数据量非常大，这对用户的肉眼观察来说，也是很困难的。而输入检索式就无需再从下拉列表框肉眼查找选项，减轻了用户的操作负担。

优选地，当只有一个选项符合检索式时，将符合的选项设置为选中状态。这节省了用户点击选中的操作。

优选地，本方法还包括：文本框接受对检索式的编辑；下拉列表呈现符合编辑更新后的检索式的选项。这方便了用户修改检索式。

优选地，文本框接受对检索式的编辑包括：接受Delete键或Backspace键对检索式中关键字的删除。这使得用户修改检索式的操作非常方便。

优选地，下拉列表中的选项被赋予范围属性，本方法还包括：通过将检索式匹配各个选项的范围来判断各个选项是否符合检索式。现有技术中，若属性值支持选择多个选项时，由于下拉列表框实现方式仅支持单项选择。而本实施例中，判断各个选项是否符合检索式，允许多项选择，能满足应用开发的个性化要求。

优选地，本方法还包括：当检索式中的关键字为字母串时，将字母串解释为拼音；以拼音对应的汉字替代字母串。现有技术中下拉列表框仅支持键值对的绑定，也没有相应的接口扩展。而本实施例扩展了对关键字的解释，使得用户的操作更加便捷。

优选地，在下拉列表的选项上设置检查框，本方法还包括：检查框接受选中或取消；根据检查框的选中或取消，选择或取消检查框对应的选项。这使得多项选择的操作非常方便。

优选地，下拉列表框设置开关，本方法还包括：开关接受对多选或单选的选择；当选择为单选时，仅允许一个选项被选中；当选择为多选时，允许多个选项同时被选中。这使得多项选择和单项选择的切换操作非常方便。

优选地，如果多个选项同时被选中，本方法还包括：在文本框中呈现多个选项，多个选项之间以分隔符分开。这使得多项选择的操作非常方便。

优选地，如果仅有一个选项被选中，本方法还包括：在文本框中呈现所选的选项。这使得单项选择的操作非常方便。

优选地，本发明实施例还提供了下拉列表框控件的各种操作的屏幕截图。

如图2所示，点击下拉按钮后出现“牡丹、菊花、白灼”三个选项；

如图3所示，点击检查框并选中“牡丹”；

如图4所示，点击检查框并选中“菊花”；

如图5所示，在文本框中选中“菊花”；

如图6所示，敲击Backpace键删除“菊花”；

如图7所示，在文本框中输入“含羞草”；

如图8所示，自动选中菊花；

如图9所示，在文本框中输入“rb”；

如图10所示，自动选中“白灼”；

如图11所示，点击下拉按钮；

如图12所示，取消选中“菊花”；

如图13所示，全部取消选中；

如图14所示，在文本框中输入“薰衣草”；

如图15所示，在文本框中输入“1”；

如图16所示，自动选中“牡丹”。

下面从程序设计方面详细地讲述如何实现和扩展图2-图16的下拉列表框控件：

模拟下拉列表框图形界面：首先添加一个Div作为整个自定义控件的容器Div_Root，然后添加一个div作为文本框和下拉按钮的容器Div_Search，设置Div_Search边框宽度为1，边框颜色模拟普通下拉列表边框颜色；在Div_Search中添加一个文本框，设置文本框的边框宽度为0，向右对齐，高度与Div_Search保持一致，宽度小于Div_Search的宽度，预留下拉列表框按钮宽度大小；在Div_Search中文本框的右边添加一个图片按钮控件模拟下拉按钮，边框宽度为0，分别编程实现下拉列表框按钮在正常状态、鼠标滑过、鼠标双击时的效果，大小宽度与下拉按钮保持一致；在Div_Rootz中Div_Search的下边添加一个Div作为显示数据选项的Div_Data，默认情况隐藏，通过编程方式实现数据项的绑定。

模拟下拉列表框用户事件：鼠标点击图片按钮时展开绑定数据项的Div_Data，再次点击时隐藏Div_Data，当选项面板中数据项较多时可以滚动浏览选项，当鼠标移出Div_Data区域时隐藏选项面板，点击数据项时在文本框中显示相应选项，点击其他选项时将文本框中数据选项替换为当前选项。

扩展下拉列表框选择方式：传统的下拉列表框只能通过点击下拉箭头展开数据选项面板。在文本框中输入关键字，将自动展开选项面板，并且过滤其不符合条件的选项，仅剩余的选项将在下拉面板中显示，此时可以通过鼠标点击选择选项，也可以进一步通过空格分隔，输入更多关键字，过滤剩余选项；当满足条件的数据只有 一个选项时，系统自动选中此选项，并且在文本框显示选择结果；同时可以通过BackSpace键在文本框中清空选项或者通过不选中选项前面的检查框清除选项。

扩展下拉列表框选择维度：传统的数据绑定只包括数值和文本两个维度的数据，用户一般通过文本选项确定哪一项符合条件，但是在数据量相当大的情况下，用户希望通过不同的关注点来确定数据选项范围，传统的实现方式没有实现多元化的数据绑定，当然就不能从不同的维度来筛选数据项；当为数据选项附上类似业务分类、所属部门等不同属性时，可以从相应部门来缩小数据范围，从分类上进一步缩小数据范围，最后结合关键字筛选相应选项。其实这里完全类似于一个高级查询，但是一切又变得那么简单，没有任何限制，完全只有一个关键字的概念，简单丰富的搜索方式成为下拉列表框扩展的亮点。同时，使用系统时，经常需要在不同的输入法之间频繁的切换，这也给工作带来了不少阻碍，非常浪费时间和分散注意力，因此实现中文和拼音同等功效迫在眉睫，输入拼音即可过滤掉不属于该发音的中文选项，完全不需要切换至中文状态，使用起来非常的方便和快捷。

扩展下拉列表框选择模式：单一的选择模式在多数情况下不太适合相应的用户需求，下拉列表框仅仅支持单选模式，这里通过设置不同的开关来确定选择模式，确定该系统是支持单选还是多选，选择多个选项时，文本框以分号分隔，鼠标单击文本框中字符时，将自动选中该选项，可以通过Delete删除选项。

从上面的界面模拟和功能改进中，就实现了一个全新的下拉列表框扩展控件，界面展示非常相似，没有给用户带来视觉上的烦恼，但在功能上扩展了很多；编程开发时同样非常简单，该控件完全按照服务器控件的标准模式实现，在变量申明与属性设置上与下拉列表框无异，仅仅在绑定数据选项时支持选择更多的数据列，实现了 更多的选项助手，类似一个简单的高级查询客户端，又是一个选择数据的下拉控件，简单易用，两者之间的结合带来了高效易用的编程模型，也迎来了很好的用户体验。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种网页中的下拉列表框控件的实现方法，其特征在于，包括：

所述下拉列表框控件的文本框接受检索式的输入，其中，所述下拉列表控件的选项面板显示有预先绑定的选项；

触发所述下拉列表框控件的下拉列表，其中，所述下拉列表中的选项被赋予范围属性，所述下拉列表仅呈现符合所述检索式且匹配各个选项的范围的选项；

所述选项接受选择，并触发相应的事件；

其中，当只有一个选项符合所述检索式时，将所述符合的选项设置为选中状态。

2.根据权利要求1所述的方法，其特征在于，还包括：

所述文本框接受对所述检索式的编辑；

所述下拉列表呈现符合所述编辑更新后的检索式的选项。

3.根据权利要求2所述的方法，其特征在于，所述文本框接受对所述检索式的编辑包括：

接受Delete键或Backspace键对所述检索式中关键字的删除。

4.根据权利要求1所述的方法，其特征在于，还包括：

当所述检索式中的关键字为字母串时，将所述字母串解释为拼音；

以所述拼音对应的汉字替代所述字母串。

5.根据权利要求1所述的方法，其特征在于，在所述下拉列表的选项上设置检查框，还包括：

所述检查框接受选中或取消；

根据所述检查框的选中或取消，选择或取消所述检查框对应的选项。

6.根据权利要求1所述的方法，其特征在于，所述下拉列表框设置开关，还包括：

所述开关接受对多选或单选的选择；

当选择为单选时，仅允许一个选项被选中；

当选择为多选时，允许多个选项同时被选中。

7.根据权利要求6所述的方法，其特征在于，多个选项同时被选中，还包括：

在文本框中呈现所述多个选项，所述多个选项之间以分隔符分开。

8.根据权利要求6所述的方法，其特征在于，仅有一个选项被选中，还包括：

在文本框中呈现所选的选项。