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

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

【技术实现步骤摘要】
【专利摘要】本专利技术提供了一种，包括：下拉列表框控件的文本框接受检索式的输入；触发下拉列表框控件的下拉列表，下拉列表仅呈现符合检索式的选项；选项接受选择，并触发相应的事件。本专利技术提高了网页的操作效率。【专利说明】
本专利技术涉及网页编程领域，具体而言，涉及一种。
技术介绍
下拉列表框是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所示，在文本框中输入“I”； 如图16所示，自动选中“牡丹”。下面从程序设计方面详细地讲述如何实现和扩展图2-图16的下拉列表框控件:模拟下拉列表框图形界面:首先添加一个Div作为整个自定义控件的容器DivK(rat，然后添加一个div作为文本框和下拉按钮的容器Divsearch,设置Divsearch边框宽度为I，边框颜色模拟普通下拉列表边框颜色；在Divsrareh中添加一个文本框，设置文本框的边框宽度为O,向右对齐，高度与Divse一保持一致，宽度小于Divsemeh的宽度，预留下拉列表框按钮宽度大小；在Divsearch中文本框的右边添加一个图片按钮控件模拟下拉按钮，边框宽度为0，分别编程实现下拉列表框按钮在正常状态、鼠标滑过、鼠标双击时的效果，大小宽度与下拉按钮保持一致；在Divforatz中Divsealxh的下边添加一个Div作为显示数据选项的DivData,默认情况隐藏，通过编程方式实现数据项的绑定。模拟下拉列表框用户事件:鼠标点击图片按钮时展开绑定数据项的Divllata，再次点击时隐藏Divllata，当选项面板中数据项较多时可以滚动浏览选项，当鼠标移出Divllata区域时隐藏选项面板，点击数据项时在文本框中显示相应选项，点击其他选项时将文本框中数据选项替换为当前选项。扩展下拉列表框选择方式:传统的下拉列表框只能通过点击下拉箭头展开数据选项面板。在文本框中输入关键字，将自动展开选项面板，并且过滤其不符合条件的选项，仅剩余的选项将在下拉面板中显示，此时可以通过鼠标点击选择选项，也可以进一步通过空格分隔，输入更多关键字，过滤剩余选项；当满足条件的数据只有一个选项时，系统自动选中此选项，并且在文本框显示选择结果；同时可以通过Backspace键在文本框中清空选项或者通过不选中选项前面的检查框清除选项。扩展下拉列表框选择维度:传统的数据绑定只包括数值和文本两个维度的数据，用户一般通过文本选项确定哪一项本文档来自技高网...

【技术保护点】
一种网页中的下拉列表框控件的实现方法，其特征在于，包括：所述下拉列表框控件的文本框接受检索式的输入；触发所述下拉列表框控件的下拉列表，所述下拉列表仅呈现符合所述检索式的选项；所述选项接受选择，并触发相应的事件。

【技术特征摘要】

【专利技术属性】
技术研发人员：任美全，
申请(专利权)人：北大方正集团有限公司，北京北大方正电子有限公司，
类型：发明
国别省市：北京;11