CN117235397B - 一种表单数据输入方法、装置、介质 - Google Patents
一种表单数据输入方法、装置、介质 Download PDFInfo
- Publication number
- CN117235397B CN117235397B CN202311517221.1A CN202311517221A CN117235397B CN 117235397 B CN117235397 B CN 117235397B CN 202311517221 A CN202311517221 A CN 202311517221A CN 117235397 B CN117235397 B CN 117235397B
- Authority
- CN
- China
- Prior art keywords
- data
- drop
- option
- user
- down option
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 238000004590 computer program Methods 0.000 claims description 12
- 230000008569 process Effects 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 7
- 230000014509 gene expression Effects 0.000 claims description 5
- 230000001419 dependent effect Effects 0.000 claims description 4
- 230000004044 response Effects 0.000 abstract description 9
- 230000003993 interaction Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000013473 artificial intelligence Methods 0.000 description 2
- 230000002457 bidirectional effect Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012163 sequencing technique Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本申请涉及计算机领域,公开了一种表单数据输入方法、装置、介质,包括:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与用户输入数据对应的目标下拉选项;根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素。由此可见,本申请所提供的技术方案,通过在用户输入数据时,根据与用户输入数据对应的目标下拉选项生成文档对象模型元素,以便于用户选择,并在完成数据输入后,将文档对象模型元素清除,以减少页面中文档对象模型元素的数据量,从而提高页面的响应速度。
Description
技术领域
本申请涉及计算机领域,特别是涉及一种表单数据输入方法、装置、介质。
背景技术
在用户浏览网页或使用应用程序时,需要向网页和应用程序中的表单输入数据(例如:用户名信息、文本信息和选择选项等)以获取服务。下拉框是一种常用的获取用户数据的组件。目前常用的下拉框组件包括ElementUI提供的el-select组件和iviewUI所提供的select组件,但这些下拉框组件通常以文档对象模型(Document Object Model,DOM)元素保存输入框的下拉选项数据,在下拉选项过多时,会影响页面的加载速度,导致页面卡顿,影响用户的使用体验。
由此可见,如何提供一种新的表单数据输入方法,以防止下拉框下拉选项过多影响页面加载速度,是本领域技术人员亟需解决的问题。
发明内容
本申请的目的是为了解决现有技术中通过下拉框向表单中输入数据时,由于页面中以DOM元素形式存储的下拉框选项过多导致页面数据过多,影响页面的加载速度,为了解决这一技术问题,本申请提供了一种表单数据输入方法、装置、介质,以减少页面中文档对象模型元素的数据量,提高页面的响应速度和用户的使用体验。
为了解决上述技术问题,本申请提供了一种表单数据输入方法,包括:
响应于用户所发送的数据输入请求以获取用户输入数据;
根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项;
根据所述目标下拉选项生成文档对象模型元素,并在下拉选项界面显示所述目标下拉选项;
获取用户选择数据,以将所述用户选择数据输入至表单,并清除所述文档对象模型元素。
优选的,所述预设匹配规则包括:拼音匹配、模糊匹配;
相应的,所述根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项包括:
确定下拉选项库中与各所述预设匹配规则对应的目标下拉选项;其中,所述下拉选项库为设置于前端本地存储、并用于保存原始选项数据的数据库。
优选的,所述确定下拉选项库中与各所述预设匹配规则对应的目标下拉选项包括:
获取各所述预设匹配规则的优先级信息,并对各所述预设匹配规则进行优先级排序;
按照各所述预设匹配规则的优先级顺序,依次确定与各所述预设匹配规则对应的所述目标下拉选项。
优选的,还包括:
获取用户通过表单输入按钮所输入的匹配规则选择指令;
根据所述匹配规则选择指令确定各所述预设匹配规则的优先级信息。
优选的,所述根据所述目标下拉选项生成文档对象模型元素包括:
获取所述前端本地存储中的所述原始选项数据;
根据所述原始选项数据,在所述下拉选项界面中渲染出与所述原始选项数据的文档对象模型元素。
优选的,还包括:
为各所述目标下拉选项创建Vue实例,并对所述目标下拉选项的属性信息进行数据劫持,以对所述Vue实例的数据进行处理;
编译所述Vue实例,解析所述Vue实例的指令和表达式,并创建相应的***,以获取各所述目标下拉选项的依赖数据,从而建立各所述目标下拉选项与***间的关联关系。
优选的,所述根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项的步骤后,还包括:
若下拉选项库中不存在与所述用户输入数据对应的所述目标下拉选项,则记录所述用户输入数据和与所述用户输入数据对应的后台信息;
根据所述用户输入数据和所述后台信息生成新的下拉选项数据,并将所述下拉选项数据保存至所述下拉选项库中,以更新所述下拉选项库。
为了解决上述技术问题,本申请还提供了一种表单数据输入装置,包括:
获取模块,用于响应于用户所发送的数据输入请求以获取用户输入数据;
确定模块,用于根据预设匹配规则确定与所述用户输入数据对应的目标下拉选项;
生成模块,用于根据所述目标下拉选项生成文档对象模型元素,并在下拉选项界面显示所述目标下拉选项;
清除模块,用于获取用户选择数据,以将所述用户选择数据输入至表单,并清除所述文档对象模型元素。
为了解决上述技术问题,本申请还提供了一种表单数据输入装置,包括存储器,用于存储计算机程序;
处理器,用于执行所述计算机程序时实现所述的表单数据输入方法的步骤。
为了解决上述技术问题,本申请还提供了一种计算机可读存储介质,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现所述的表单数据输入方法的步骤。
本申请提供了一种表单数据输入方法,包括:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与用户输入数据对应的目标下拉选项;根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素。由此可见,本申请所提供的技术方案,通过在用户输入数据时,根据与用户输入数据对应的目标下拉选项生成文档对象模型元素,以便于用户选择,并在完成数据输入后,将文档对象模型元素清除,以减少页面中文档对象模型元素的数据量,从而提高页面的响应速度。
此外,本申请还提供了一种表单数据输入装置、介质,与上述方法对应,效果同上。
附图说明
为了更清楚地说明本申请实施例,下面将对实施例中所需要使用的附图做简单的介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本申请实施例所提供的一种表单数据输入方法的流程图;
图2为本申请实施例所提供的一种表单数据输入装置的结构图;
图3为本申请实施例所提供的另一种表单数据输入装置的结构图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下,所获得的所有其他实施例,都属于本申请保护范围。
本申请的核心是提供一种表单数据输入方法、装置、介质,以减少页面中文档对象模型元素的数据量,提高页面的响应速度和用户的使用体验。
目前常用的下拉框组件(例如:Element UI的el-select、iview UI的select组件)都能够提供下拉选择功能,包含可搜索下拉组件,但是这些组件考虑上往往没有很全面,当数据量较大的情况下,页面中所保存的DOM元素较多,导致页面卡顿甚至卡死的现象。为了解决这一技术问题,本申请提供了一种表单数据输入方法,通过在用户输入数据时,根据与用户输入数据对应的目标下拉选项生成文档对象模型元素,以便于用户选择,并在完成数据输入后,将文档对象模型元素清除,以减少页面中文档对象模型元素的数据量,从而提高页面的响应速度。
为了使本技术领域的人员更好地理解本申请方案,下面结合附图和具体实施方式对本申请作进一步的详细说明。
图1为本申请实施例所提供的一种表单数据输入方法的流程图,如图1所示,该方法包括:
S10:响应于用户所发送的数据输入请求以获取用户输入数据;
S11:根据预设匹配规则确定与用户输入数据对应的目标下拉选项;
S12:根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;
S13:获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素。
本申请所提供的技术方案应用于网页或应用程序所提供的用户交互页面,用户通过交互页面中的输入框向表单中输入数据,以获取交互页面所提供的服务。
在具体实施中,交互页面响应于用户所发送的数据输入请求以获取用户输入数据,并将与用户输入数据匹配的下拉选项显示在下拉选项界面中,以便于用户通过鼠标点击或键盘光标选择的方式,将下拉选项界面中的数据输入下拉输入框中,从而实现数据交互。
可以理解的是,网页的目标下拉选项以普通数据的形式存储在前端存储区域或后端存储区域中,当用户输入的数据与任意下拉选项的数据匹配时,在匹配的下拉选项被称为目标下拉选项。根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项,以便于用户选择相应的选项。需要注意的是,在生成文档对象模型元素后,目标下拉选项的相关数据以文档对象模型元素的形式存储,当页面中文档对象模型元素过多时,将会导致页面卡顿,因此,当用户完成输入(即获取到用户选择数据)时,还需要将文本框所对应的文档对象模型元素清除,以减少页面的数据量。其中,文档对象模型是一种接口(Application Programming Interface,API),用于操作网页内容。在DOM中,我们可以用编程语言(如JavaScript)操作XML或HTML文档。DOM将文档结构化为节点树,这使得我们能够更改文档的内容和结构。DOM中的节点类型有很多种。例如,元素节点可以对应HTML或XML的各个元素标签,属性节点则对应元素的各种属性。一旦获取到特定的DOM元素,就可以进行各种操作,例如改变元素的内容、修改元素的属性、改变元素的样式、或者修改元素的结构(比如***新的子元素或者删除已有的子元素)。
本申请提供了一种表单数据输入方法,包括:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与用户输入数据对应的目标下拉选项;根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素。由此可见,本申请所提供的技术方案,通过在用户输入数据时,根据与用户输入数据对应的目标下拉选项生成文档对象模型元素,以便于用户选择,并在完成数据输入后,将文档对象模型元素清除,以减少页面中文档对象模型元素的数据量,从而提高页面的响应速度。
可以理解的是,预设匹配规则为服务提供商预先确定的匹配规则,常用的匹配规则包括模糊匹配、英文匹配、拼音匹配等。当用户启动人机交互窗口后,向输入框中输入相关数据,当前页面根据匹配规则自动匹配与输入数据相对应的下拉选项,以便于用户选择。
具体的,根据预设匹配规则确定与用户输入数据对应的目标下拉选项包括:确定下拉选项库中与各预设匹配规则对应的目标下拉选项;其中,下拉选项库为设置于前端本地存储、并用于保存原始选项数据的数据库。
在具体实施中,预设的匹配规则可以为一种,也可以为多种,此处不做限定。
在上述实施例的基础上,当存在多种预设的匹配规则时,确定下拉选项库中与各预设匹配规则对应的目标下拉选项包括:获取各预设匹配规则的优先级信息,并对各预设匹配规则进行优先级排序;按照各预设匹配规则的优先级顺序,依次确定与各预设匹配规则对应的目标下拉选项。
例如:当拼音匹配、模糊匹配、英文匹配的优先级逐渐降低时,当用户输入数据后,首先根据拼音匹配规则对用户输入的数据进行匹配,若未匹配到相关数据或匹配到的数据量小于阈值,则根据模糊匹配规则对用户输入的数据进行匹配;若依然未匹配到相关数据或匹配到的数据量小于阈值,则根据英文匹配规则对用户输入的数据进行匹配。
可以理解的是,不同匹配规则的优先级可以为服务提供商预先确定的规则,也可以由用户自行设定。
在上述实施例的基础上,表单数据输入方法还包括:获取用户通过表单输入按钮所输入的匹配规则选择指令;根据匹配规则选择指令确定各预设匹配规则的优先级信息。
在具体实施中,首先添加一个input框,自定义双向绑定,以便于后续处理数据,并添加各种下拉框所需的方法,完成初始化。通过设置props_valCanBlank来判断如果查询内容与目录列表不匹配时,是否需要重置回之前的内容。如果搜索的内容为空或与目录不为空,则默认显示为第一项,或者默认对input框的内容不做处理,并且不修改查询目录的内容。通过propssupportPinyinFilter字段来判断是否支持拼音的摆索,若支持再去初始化拼音查询的方法。其他匹配规则的配置过程与此类似。在每次选择或者关闭下拉目录时,将原生的下拉选项列表加个定时器进行清除处理,以此来减少DOM元素在页面的存在,减少性能的消耗,提高页面的反应速度。
在具体实施中,根据目标下拉选项生成文档对象模型元素包括:获取前端本地存储中的原始选项数据;根据原始选项数据,在下拉选项界面中渲染出与原始选项数据的文档对象模型元素。
在本发明一个实施例中,从浏览器的缓存中读取到当前原始数据后,根据当前原始数据,在浏览器的消失窗口中渲染出当前原始数据对应的DOM结构,其中DOM结构包括input文本框、checkbox复选框、radio单选框、select下拉框、commonhelp帮助框、longtext长文本编辑框、datepicker时间选择框及diyinput自定义编辑类型中的任意一个或多个。例如,用户将员工信息表滚动至目标区域后停止滚动,需要对该范围内员工的信息进行编辑,根据读取到的当前原始数据,渲染出目标区域内的各个DOM结构,其中第一列为员工姓名,DOM类型为input文本框,第二列为性别,DOM类型为radio单选框,第三列为出生年月,DOM类型为datepicker时间选择框,第四列为工龄,DOM类型为select下拉框等。
作为优选的实施例,根据预设匹配规则确定与用户输入数据对应的目标下拉选项的步骤后,还包括:若下拉选项库中不存在与用户输入数据对应的目标下拉选项,则记录用户输入数据和与用户输入数据对应的后台信息;根据用户输入数据和后台信息生成新的下拉选项数据,并将下拉选项数据保存至下拉选项库中,以更新下拉选项库。
进一步的,还需要对各目标下拉选项进行双向数据绑定。具体的,为各目标下拉选项创建Vue实例,并对目标下拉选项的属性信息进行数据劫持,以对Vue实例的数据进行处理;
编译Vue实例,解析Vue实例的指令和表达式,并创建相应的***,以获取各目标下拉选项的依赖数据,从而建立各目标下拉选项与***间的关联关系,从而完成双向数据绑定。
当创建Vue实例时,Vue2会对目标下拉选项的data选项中的所有属性进行数据劫持。这通过使用Object.defineProperty()方法将每个属性转换为getter和setter,并在数据被访问或修改时触发相应的操作。
Watcher***的创建:在编译模板时,Vue2会解析模板中的指令和表达式,并创建相应的Watcher***。每个Watcher与一个数据关联,负责监听该数据的变化,并更新相关的视图。
依赖收集:模板编译过程中,Watcher会自动收集目标下拉选项所依赖的数据(如data、computed、props等),建立起数据与Watcher之间的关联关系。这样,当数据发生改变时,就能找到需要更新的对应Watcher,并通知其进行更新。
发布-订阅模式:当数据发生变化时,数据劫持会触发setter函数,并调用发布-订阅模式的调度中心。调度中心会根据依赖收集得到的相关Watcher列表,依次通知这些Watcher进行更新。
视图更新:每个被通知的Watcher都会执行相应的更新操作,比如重新渲染视图或更新DOM元素。这样,数据的变化能够实时反映到视图中。
在上述实施例中,对于表单数据输入方法进行了详细描述,本申请还提供表单数据输入装置对应的实施例。需要说明的是,本申请从两个角度对装置部分的实施例进行描述,一种是基于功能模块的角度,另一种是基于硬件的角度。
图2为本申请实施例所提供的一种表单数据输入装置的结构图,如图2所示,该装置包括:
获取模块10,用于响应于用户所发送的数据输入请求以获取用户输入数据;
确定模块11,用于根据预设匹配规则确定与用户输入数据对应的目标下拉选项;
生成模块12,用于根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;
清除模块13,用于获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素。
此外,本申请所提供的表单数据输入装置还包括优先级信息确定模块、下拉选项关联模块、下拉选项库更新模块。
其中,优先级信息确定模块用于获取用户通过表单输入按钮所输入的匹配规则选择指令;根据匹配规则选择指令确定各预设匹配规则的优先级信息。
下拉选项关联模块用于为各目标下拉选项创建Vue实例,并对目标下拉选项的属性信息进行数据劫持,以对Vue实例的数据进行处理;编译Vue实例,解析Vue实例的指令和表达式,并创建相应的***,以获取各目标下拉选项的依赖数据,从而建立各目标下拉选项与***间的关联关系。
下拉选项库更新模块用于在根据预设匹配规则确定与用户输入数据对应的目标下拉选项的步骤后,若下拉选项库中不存在与用户输入数据对应的目标下拉选项,则记录用户输入数据和与用户输入数据对应的后台信息;根据用户输入数据和后台信息生成新的下拉选项数据,并将下拉选项数据保存至下拉选项库中,以更新下拉选项库。
由于装置部分的实施例与方法部分的实施例相互对应,因此装置部分的实施例请参见方法部分的实施例的描述,这里暂不赘述。
本实施例提供了一种表单数据输入装置,包括:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与用户输入数据对应的目标下拉选项;根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素。由此可见,本申请所提供的技术方案,通过在用户输入数据时,根据与用户输入数据对应的目标下拉选项生成文档对象模型元素,以便于用户选择,并在完成数据输入后,将文档对象模型元素清除,以减少页面中文档对象模型元素的数据量,从而提高页面的响应速度。
图3为本申请另一实施例提供的表单数据输入装置的结构图,如图3所示,表单数据输入装置包括:存储器20,用于存储计算机程序;
处理器21,用于执行计算机程序时实现如上述实施例表单数据输入方法的步骤。
本实施例提供的表单数据输入装置可以包括但不限于智能手机、平板电脑、笔记本电脑或台式电脑等。
其中,处理器21可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器21可以采用数字信号处理器(Digital Signal Processor,DSP)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)、可编程逻辑阵列(Programmable LogicArray,PLA)中的至少一种硬件形式来实现。处理器21也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称中央处理器(CentralProcessing Unit,CPU);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器21可以集成有图像处理器(Graphics Processing Unit,GPU),GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器21还可以包括人工智能(Artificial Intelligence,AI)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器20可以包括一个或多个计算机可读存储介质,该计算机可读存储介质可以是非暂态的。存储器20还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。本实施例中,存储器20至少用于存储以下计算机程序201,其中,该计算机程序被处理器21加载并执行之后,能够实现前述任一实施例公开的表单数据输入方法的相关步骤。另外,存储器20所存储的资源还可以包括操作***202和数据203等,存储方式可以是短暂存储或者永久存储。其中,操作***202可以包括Windows、Unix、Linux等。数据203可以包括但不限于用户输入数据、用户选择数据等。
在一些实施例中,表单数据输入装置还可包括有显示屏22、输入输出接口23、通信接口24、电源25以及通信总线26。
本领域技术人员可以理解,图3中示出的结构并不构成对表单数据输入装置的限定,可以包括比图示更多或更少的组件。
本申请实施例提供的表单数据输入装置,包括存储器和处理器,处理器在执行存储器存储的程序时,能够实现如下方法:响应于用户所发送的数据输入请求以获取用户输入数据;根据预设匹配规则确定与用户输入数据对应的目标下拉选项;根据目标下拉选项生成文档对象模型元素,并在下拉选项界面显示目标下拉选项;获取用户选择数据,以将用户选择数据输入至表单,并清除文档对象模型元素。
最后,本申请还提供一种计算机可读存储介质对应的实施例。计算机可读存储介质上存储有计算机程序,计算机程序被处理器执行时实现如上述方法实施例中记载的步骤。
可以理解的是,如果上述实施例中的方法以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RanDOM Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上对本申请所提供的表单数据输入方法、装置、介质进行了详细介绍。说明书中各个实施例采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言,由于其与实施例公开的方法相对应,所以描述的比较简单,相关之处参见方法部分说明即可。应当指出,对于本技术领域的普通技术人员来说,在不脱离本申请原理的前提下,还可以对本申请进行若干改进和修饰,这些改进和修饰也落入本申请权利要求的保护范围内。
还需要说明的是,在本说明书中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
Claims (7)
1.一种表单数据输入方法,其特征在于,包括:
响应于用户所发送的数据输入请求以获取用户输入数据;
获取各预设匹配规则的优先级信息,并在对各所述预设匹配规则进行优先级排序后,按照各所述预设匹配规则的优先级顺序,依次确定下拉选项库中与各所述预设匹配规则对应的目标下拉选项;其中,所述下拉选项库为设置于前端本地存储、并用于保存原始选项数据的数据库,所述预设匹配规则包括:拼音匹配、模糊匹配;
获取所述前端本地存储中的所述原始选项数据,根据所述原始选项数据,在所述下拉选项界面中渲染出与所述原始选项数据的文档对象模型元素,并在下拉选项界面显示所述目标下拉选项;
获取用户选择数据,以将所述用户选择数据输入至表单,并清除所述文档对象模型元素。
2.根据权利要求1所述的表单数据输入方法,其特征在于,还包括:
获取用户通过表单输入按钮所输入的匹配规则选择指令;
根据所述匹配规则选择指令确定各所述预设匹配规则的优先级信息。
3.根据权利要求1或2所述的表单数据输入方法,其特征在于,还包括:
为各所述目标下拉选项创建Vue实例,并对所述目标下拉选项的属性信息进行数据劫持,以对所述Vue实例的数据进行处理;
编译所述Vue实例,解析所述Vue实例的指令和表达式,并创建相应的***,以获取各所述目标下拉选项的依赖数据,从而建立各所述目标下拉选项与***间的关联关系。
4.根据权利要求1所述的表单数据输入方法,其特征在于,所述依次确定下拉选项库中与各所述预设匹配规则对应的所述目标下拉选项的步骤后,还包括:
若所述下拉选项库中不存在与所述用户输入数据对应的所述目标下拉选项,则记录所述用户输入数据和与所述用户输入数据对应的后台信息;
根据所述用户输入数据和所述后台信息生成新的下拉选项数据,并将所述下拉选项数据保存至所述下拉选项库中,以更新所述下拉选项库。
5.一种表单数据输入装置,其特征在于,包括:
获取模块,用于响应于用户所发送的数据输入请求以获取用户输入数据;
确定模块,用于获取各预设匹配规则的优先级信息,并对各所述预设匹配规则进行优先级排序后,按照各所述预设匹配规则的优先级顺序,依次确定下拉选项库中与各所述预设匹配规则对应的目标下拉选项;其中,所述下拉选项库为设置于前端本地存储、并用于保存原始选项数据的数据库,所述预设匹配规则包括:拼音匹配、模糊匹配;
生成模块,用于获取所述前端本地存储中的所述原始选项数据,根据所述原始选项数据,在所述下拉选项界面中渲染出与所述原始选项数据的文档对象模型元素,并在下拉选项界面显示所述目标下拉选项;
清除模块,用于获取用户选择数据,以将所述用户选择数据输入至表单,并清除所述文档对象模型元素。
6.一种表单数据输入装置,其特征在于,包括存储器,用于存储计算机程序;
处理器,用于执行所述计算机程序时实现如权利要求1至4任一项所述的表单数据输入方法的步骤。
7.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如权利要求1至4任一项所述的表单数据输入方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311517221.1A CN117235397B (zh) | 2023-11-14 | 2023-11-14 | 一种表单数据输入方法、装置、介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311517221.1A CN117235397B (zh) | 2023-11-14 | 2023-11-14 | 一种表单数据输入方法、装置、介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN117235397A CN117235397A (zh) | 2023-12-15 |
CN117235397B true CN117235397B (zh) | 2024-03-15 |
Family
ID=89096943
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311517221.1A Active CN117235397B (zh) | 2023-11-14 | 2023-11-14 | 一种表单数据输入方法、装置、介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117235397B (zh) |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103793499A (zh) * | 2010-12-07 | 2014-05-14 | 奇智软件(北京)有限公司 | 一种利用浏览器地址栏获取应用信息的方法和装置 |
CN103885943A (zh) * | 2012-12-19 | 2014-06-25 | 北大方正集团有限公司 | 网页中的下拉列表框控件的实现方法 |
CN109408056A (zh) * | 2018-10-15 | 2019-03-01 | 四川长虹电器股份有限公司 | 一种下拉框组件 |
CN111222066A (zh) * | 2019-12-31 | 2020-06-02 | 航天信息股份有限公司广州航天软件分公司 | 一种用于事件处理及搜索的下拉组件***及方法 |
CN112114726A (zh) * | 2020-07-31 | 2020-12-22 | 福建亿能达信息技术股份有限公司 | 基于vue的下拉框的交互方法、装置、设备和介质 |
CN114254228A (zh) * | 2021-12-20 | 2022-03-29 | 杭州安恒信息技术股份有限公司 | 一种数据动态绑定的web应用处理方法及相关装置 |
CN114995904A (zh) * | 2022-05-31 | 2022-09-02 | 中国银行股份有限公司 | 一种下拉框组件加载方法及相关装置 |
CN115712769A (zh) * | 2022-11-22 | 2023-02-24 | 四川启睿克科技有限公司 | 一种基于Input标签实现输入和下拉并进行模糊搜索的方法 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20020167548A1 (en) * | 2001-05-14 | 2002-11-14 | Murray La Tondra | Method, system, and computer-program product for the customization of drop-down list boxes using hot lists |
-
2023
- 2023-11-14 CN CN202311517221.1A patent/CN117235397B/zh active Active
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103793499A (zh) * | 2010-12-07 | 2014-05-14 | 奇智软件(北京)有限公司 | 一种利用浏览器地址栏获取应用信息的方法和装置 |
CN103885943A (zh) * | 2012-12-19 | 2014-06-25 | 北大方正集团有限公司 | 网页中的下拉列表框控件的实现方法 |
CN109408056A (zh) * | 2018-10-15 | 2019-03-01 | 四川长虹电器股份有限公司 | 一种下拉框组件 |
CN111222066A (zh) * | 2019-12-31 | 2020-06-02 | 航天信息股份有限公司广州航天软件分公司 | 一种用于事件处理及搜索的下拉组件***及方法 |
CN112114726A (zh) * | 2020-07-31 | 2020-12-22 | 福建亿能达信息技术股份有限公司 | 基于vue的下拉框的交互方法、装置、设备和介质 |
CN114254228A (zh) * | 2021-12-20 | 2022-03-29 | 杭州安恒信息技术股份有限公司 | 一种数据动态绑定的web应用处理方法及相关装置 |
CN114995904A (zh) * | 2022-05-31 | 2022-09-02 | 中国银行股份有限公司 | 一种下拉框组件加载方法及相关装置 |
CN115712769A (zh) * | 2022-11-22 | 2023-02-24 | 四川启睿克科技有限公司 | 一种基于Input标签实现输入和下拉并进行模糊搜索的方法 |
Non-Patent Citations (3)
Title |
---|
Vue.js在前端开发应用中的性能影响研究;唐斌斌;叶奕;;电子制作(第10期);全文 * |
Web 前端架构模式的演化及MVVM 模式在 Web 前端框架中的研究;马利军;软件;第第44卷卷(第第7期期);全文 * |
张哲.短视频社区 产品 运营与商业化.北京:机械工业出版社,2022,第81页. * |
Also Published As
Publication number | Publication date |
---|---|
CN117235397A (zh) | 2023-12-15 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
AU2006284908B2 (en) | Markup based extensibility for user interfaces | |
US9858253B2 (en) | Browser extension for web form capture | |
US6252594B1 (en) | Method and system for aiding a user in scrolling through a document using animation, voice cues and a dockable scroll bar | |
US7895179B2 (en) | Asynchronous updating of web page data views | |
US20150012818A1 (en) | System and method for semantics-concise interactive visual website design | |
KR102345002B1 (ko) | 특허 문서 작성 장치, 방법, 컴퓨터 프로그램, 컴퓨터로 판독 가능한 기록매체, 서버 및 시스템 | |
JP7395475B2 (ja) | ウェブサイト構築システムにおけるテキストコンテンツの生成及び編集のためのシステム及び方法 | |
US9026992B2 (en) | Folded views in development environment | |
US9535667B2 (en) | Content collapse outside of selection | |
US8413070B1 (en) | Declarative resizeable list in electronic form | |
JP2011159284A (ja) | ウェブサイトフォントのプレビュー | |
Ashok et al. | Web screen reading automation assistance using semantic abstraction | |
KR20150085716A (ko) | 웹 스크래핑 추출 데이터 설정 방법 | |
CN114036443A (zh) | 页面生成方法及装置 | |
TWI834538B (zh) | 介面生成系統以及介面生成方法 | |
CN107783983B (zh) | 信息展示方法及装置 | |
CN117235397B (zh) | 一种表单数据输入方法、装置、介质 | |
CN110780970A (zh) | 数据筛选方法、装置、设备及计算机可读存储介质 | |
KR101989634B1 (ko) | 미리 구축된 컨트롤을 사용하는 로직 생성 기법 | |
Aryal | Bootstrap: a front-end framework for responsive web design | |
KR20190014195A (ko) | 검색을 통한 폰트 제시 시스템 및 방법 | |
JP6521118B2 (ja) | 情報処理装置、情報処理方法、プログラム | |
JP2008191879A (ja) | 情報表示装置、情報表示装置の表示方法、情報表示プログラム、および情報表示プログラムを記録した記録媒体 | |
CN115982498A (zh) | 一种组件加载方法、装置及介质 | |
CN114329165A (zh) | 一种搜索方法、装置、介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |