CN112464130A - 一种下拉选择框输入方法、装置、设备及介质 - Google Patents
一种下拉选择框输入方法、装置、设备及介质 Download PDFInfo
- Publication number
- CN112464130A CN112464130A CN202011301967.5A CN202011301967A CN112464130A CN 112464130 A CN112464130 A CN 112464130A CN 202011301967 A CN202011301967 A CN 202011301967A CN 112464130 A CN112464130 A CN 112464130A
- Authority
- CN
- China
- Prior art keywords
- pull
- drop
- box
- options
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 60
- 230000001960 triggered effect Effects 0.000 claims abstract description 33
- 238000004590 computer program Methods 0.000 claims description 11
- 238000010586 diagram Methods 0.000 description 4
- 230000008602 contraction Effects 0.000 description 3
- 208000003028 Stuttering Diseases 0.000 description 2
- 238000013473 artificial intelligence Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000011010 flushing procedure Methods 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种下拉选择框输入方法、装置、设备及介质，该方法包括：获取点击下拉选择框触发的下拉选项显示请求；基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项；在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示；在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。这样能够解决下拉选项数据量超大时，出现卡顿的问题。
Description
技术领域
本申请涉及计算机技术领域，特别涉及一种下拉选择框输入方法、装置、设备、介质。
背景技术
下拉选择框是html(Hyper Text Markup Language，超文本标记语言)页面开发，页面构建的常用元素。下拉选择框可以提供默认数据供用户使用，解决了直接使用文字输入框，不理解该字段意义的问题。
常用的下拉选择框一般为原生的html下的下拉选择框。主要采用原生的下拉操作，原生的元素绘制，原生的样式绘制。而高级的下拉选择框，可以采用bootstrap进行下拉选择框的重构，将下拉选择项<option>的数据剥离出来，用<ul>和<li>标签，重新进行页面元素绘制。解决了原生的下拉选择框无法进行内部样式绘制的问题。
但是，不论是原生的下拉选择框还是目前的高级下拉选择框，在下拉选项的数据量超大的情况下，因为全部下拉框元素直接生成在页面元素中，导致整个页面数据量过大，出现卡顿，包括下拉框展开和收缩卡顿等。
发明内容
有鉴于此，本申请的目的在于提供一种下拉选择框输入方法、装置、设备、介质，能够解决下拉选项数据量超大时，出现卡顿的问题。其具体方案如下：
第一方面，本申请公开了一种下拉选择框输入方法，包括：
获取点击下拉选择框触发的下拉选项显示请求；
基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数；
在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示；
在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。
可选地，还包括：
将所述下拉选择框的样式设置成与所述下拉选择框所属页面上的文字输入框和数据输入框相同。
可选地，还包括：
将所述专用下拉选项显示框中的下拉选项的显示样式设置成与所述页面中的文字显示样式相同。
可选地，还包括：
将所述下拉选择框的输入属性配置为必输入项，其中，所述输入属性表示所述下拉选择框为必输入项或选填输入项；
当所述下拉选择框的输入选项为空时，为所述下拉选择框在所述用户界面上的位置区域添加输入错误标识。
可选地，所述基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示的过程中，还包括：
在所述第一组下拉选项中的下拉选项名称的字符串长度超过所述专用下拉选项显示框的当前最大字符串显示长度时，基于所述第一组下拉选项中的下拉选项名称的字符串长度调整所述专用下拉选项显示框的最大字符串显示长度，以便所述专用下拉选项显示框显示所述第一组下拉选项中的下拉选项名称的字符串长度最长的下拉选项；
相应的，所述将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中的过程中，还包括：
如果所述专用下拉选项显示框中显示的被点击的下拉选项的名称的字符串长度超过所述下拉选择框的字符串显示长度，则将所述专用下拉选项显示框中显示的被点击的下拉选项的名称截断后显示在所述下拉选择框中。
可选地，所述获取点击下拉选择框触发的下拉选项显示请求之后，还包括：
在所述专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索；
获取通过所述高级搜索框输入的搜索关键字；
根据所述搜索关键字从所述下拉选项库中确定出目标下拉选项，将所述目标下拉选项中的第一组目标下拉选项发送到所述专用下拉选项显示框进行显示，并从所述目标下拉选项中异步加载第二组目标下拉选项，其中，每组目标下拉选项的下拉选项的数量均为所述预设数量；
在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二目标组下拉选项发送到所述专用下拉选项显示框进行增加显示。
可选地，所述在所述专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索之后，还包括：
当所述高级搜索框中存在搜索关键字输入时，在所述高级搜索框中添加数据清空标识，以便在获取到点击所述数据清空标识触发的数据清空指令时，将所述高级搜索框中的搜索关键字清空。
第二方面，本申请公开了一种下拉选择框输入装置，包括：
请求获取模块，用于获取点击下拉选择框触发的下拉选项显示请求；
异步加载模块，用于基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数；
增加显示模块，用于在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示；
输入模块，用于在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。
第三方面，本申请公开了一种电子设备，包括：
存储器和处理器；
其中，所述存储器，用于存储计算机程序；
所述处理器，用于执行所述计算机程序，以实现前述公开的下拉选择框输入方法。
第四方面，本申请公开了一种计算机可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现前述公开的下拉选择框输入方法。
可见，本申请先获取点击下拉选择框触发的下拉选项显示请求，然后基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数，在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示，并在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。由此可见，本申请中在获取到点击下拉选择框触发的下拉选项显示请求时，先在页面上渲染下拉选项库中的第一组下拉选项，将第一组下拉选项显示在专用下拉选项显示框中，并异步加载所述下拉选项库中的第二组下拉选项，然后在所述专用下拉选项显示框中的滚动条达到专用下拉选项显示框的底部时，将第二组下拉选项增加显示在述专用下拉选项显示框中，这时所述专用下拉选项显示框中便可以显示第一组下拉选项和第二组下拉选项。首先只是在页面上渲染下拉选项库中的第一组下拉选项，之后的下拉选项通过异步加载的方式进行处理，而不是将全部下拉选项直接生成在页面元素中，从而解决了在下拉选项数据量超大时，下拉框展示和收缩卡顿等卡顿问题。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本申请公开的一种下拉选择框输入方法流程图；
图2为本申请公开的一种具体的下拉选择框输入方法流程图；
图3为本申请公开的一种下拉选择框示意图；
图4为本申请公开的一种下拉选择框输入装置结构示意图；
图5为本申请公开的一种电子设备结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
目前，不论是原生的下拉选择框还是目前的高级下拉选择框，在下拉选项的数据量超大的情况下，因为全部下拉框元素直接生成在页面元素中，导致整个页面数据量过大，出现卡顿，包括下拉框展开和收缩卡顿等。有鉴于此，本申请提出了一种下拉选择框输入方法，解决下拉选项数据量超大时，出现卡顿的问题。
参见图1所示，本申请实施例公开了一种下拉选择框输入方法，该方法包括：
步骤S11：获取点击下拉选择框触发的下拉选项显示请求。
在具体的实施过程中，需要先获取点击下拉选择框触发的下拉选项显示请求。也即，用户在点击下拉选择框之后，便可以在用户界面上的对应位置显示对应的下拉选项，所以对于后台来说，在用户点击下拉选择框触发下拉选项显示请求时，需要获取所述下拉选项显示请求，以便进行下拉选项显示。
在实际应用中，在获取点击下拉选择框触发的下拉选项显示请求之前，还包括：将所述下拉选择框的样式设置成与所述下拉选择框所属页面上的文字输入框以及数据输入框相同，保持总体风格统一。具体的，可以通过CSS组件将所述下拉选择框的样式设置成与所述下拉选择框所属页面上的文字输入框以及数据输入框相同。
步骤S12：基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数。
在获取到所述下拉选项显示请求后，便可以基于所述下拉选项显示请求，将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框中显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数。例如，所述下拉选项库中的下拉选项总数为20000个，则所述预设数量可以为20个。
也即，在接收到所述下拉选项显示请求时，先将下拉选项库中的前预设数量个下拉选项渲染到用户界面上的专用下拉选项显示框中，并异步加载所述下拉选项库中的接下来的预设数量个下拉选项。
在实际应用中，可以将所述专用下拉选项显示框中的下拉选项的显示样式设置成与所述页面中的文字显示样式相同。也即，可以将所述下拉选项的显示样式设置为与所处页面上的文字显示样式相同，例如，均为悬浮字体变深蓝或悬浮背景变浅蓝等。具体的，可以通过CSS组件将所述专用下拉选项显示框中的下拉选项的显示样式设置成与所述页面中的文字显示样式相同。
步骤S13：在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示。
可以理解的是，需要对所述专用下拉选项显示框中的滚动条的位置进行监测，当所述专用下拉选项显示框中的滚动条达到所述专用下拉选项显示框底部时，将所述第二组下拉选项显示在所述专用下拉选项显示框中增加显示。其中，所述增加显示为在显示所述第二组下拉选项后，所述专用下拉选项显示框中可以既可以显示所述第一组下拉选项，也可以显示所述第二组下拉选项。
例如，所述预设数量为20，则接收到所述下拉选项显示显示请求时，先在用户页面渲染并在所述专用下拉选项显示框中显示下拉选项0至下拉选项19，当所述专用下拉选项显示框中的滚动条触底之后，将下拉选项20至下拉选项39也显示在所述专用下拉选项显示框中，所以所述专用下拉选项显示框中可以显示下拉选项0至下拉选项39。
具体的，可以通过jquery组件进行数据异步加载处理。
在基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示的过程中，还包括：在所述第一组下拉选项中的下拉选项名称的字符串长度超过所述专用下拉选项显示框的当前最大字符串显示长度时，基于所述第一组下拉选项中的下拉选项名称的字符串长度调整所述专用下拉选项显示框的最大字符串显示长度，以便所述专用下拉选项显示框显示所述第一组下拉选项中的下拉选项名称的字符串长度最长的下拉选项。
也即，在所述专用下拉选项显示框中显示下拉选项时，所述专用下拉选项显示框的最大字符串显示长度可以根据下拉选项的名称的字符串长度进行调整，以便可以显示最长字段的下拉选项。
步骤S14：在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。
在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，便可以将所述专用下拉选项显示框中被点击的下拉选项显示输入到所述下拉选择框中。
也即，用户在所述专用下拉选项显示框中发现自身需要输入的下拉选项时，便可以点击该下拉选项，以完成所述下拉选项框输入。
可以将所述下拉选择框的输入属性配置为必输入项，其中，所述输入属性表示所述下拉选择框为必输入项或选填输入项；当所述下拉选择框的输入选项为空时，为所述下拉选择框在所述用户界面上的位置区域添加输入错误标识。也即，可以将所述下拉选择框设置为必输入项，并将所述下拉选择框的输入选项为空时，可以为所述下拉选择框在所述用户界面上的位置区域添加输入错误标识，以提示输入错误，其中，所述错误标识包括但不限于将所述下拉选择框变成红色显示等。
具体的，可以通过CSS组件在所述下拉选择框的输入选项为空时，为所述下拉选择框在所述用户界面上的位置区域添加输入错误标识。
将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中的过程中，还包括：如果所述专用下拉选项显示框中显示的被点击的下拉选项的名称的字符串长度超过所述下拉选择框的字符串显示长度，则将所述专用下拉选项显示框中显示的被点击的下拉选项的名称截断后显示在所述下拉选择框中。
也即，所述下拉选择框的长度是固定的，当输入的下拉选项的名称的字符串长度超过所述下拉选择框的长度时，便需要进行截断显示。
在实际应用中，引用bootstrap的dropdown组件处理所述下拉选择框的下拉逻辑，开放select内部代码，替代原声选择框select的展开和收缩操作方式。所述专用下来选项显示框可以设置最大显示高度，超长的滚动显示。
可见，本申请先获取点击下拉选择框触发的下拉选项显示请求，然后基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数，在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示，并在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。由此可见，本申请中在获取到点击下拉选择框触发的下拉选项显示请求时，先在页面上渲染下拉选项库中的第一组下拉选项，将第一组下拉选项显示在专用下拉选项显示框中，并异步加载所述下拉选项库中的第二组下拉选项，然后在所述专用下拉选项显示框中的滚动条达到专用下拉选项显示框的底部时，将第二组下拉选项增加显示在述专用下拉选项显示框中，这时所述专用下拉选项显示框中便可以显示第一组下拉选项和第二组下拉选项。首先只是在页面上渲染下拉选项库中的第一组下拉选项，之后的下拉选项通过异步加载的方式进行处理，而不是将全部下拉选项直接生成在页面元素中，从而解决了在下拉选项数据量超大时，下拉框展示和收缩卡顿等卡顿问题。
参见图2所示，本申请实施例公开了一种具体的下拉选择框输入方法，该方法包括：
步骤S21：获取点击下拉选择框触发的下拉选项显示请求。
步骤S22：在所述专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索。
在获取到所述下拉选项显示请求之后，还可以在专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索。
也即，在进行下拉选项显示时，也可以在所述专用下拉选项显示框中显示高级搜索框，这样用户可以通过所述高级搜索框输入搜索关键字，以进行下拉选项搜索。具体的，可以将所述高级搜索框显示在所述专用下拉选项显示框的顶部。如图3所示，为一种具体的下拉选项框的展开图。图中A表示的区域为下拉选项框，高级搜索框以及以下的部分表示专用下拉选项显示框。
步骤S23：获取通过所述高级搜索框输入的搜索关键字。
可以理解的是，在显示所述高级搜索框之后，便可以获取通过所述高级搜索框输入的搜索关键字。
步骤S24：根据所述搜索关键字从所述下拉选项库中确定出目标下拉选项，将所述目标下拉选项中的第一组目标下拉选项发送到所述专用下拉选项显示框进行显示，并从所述目标下拉选项中异步加载第二组目标下拉选项，其中，每组目标下拉选项的下拉选项的数量均为所述预设数量。
获取到所述搜索关键字之后，还需要根据所述搜索关键字从所述下拉选项库中确定出目标下拉选项，将所述目标下拉选项中的第一组目标下拉选项发送到所述专用下拉选项显示框进行显示，并从所述目标下拉选项中异步加载第二组目标下拉选项，其中，每组目标下拉选项的下拉选项的数量均为所述预设数量。
也即，需要确定出所述下拉选项库中所有与所述搜索关键字对应的下拉选项作为所述目标下拉选项，而不是仅仅从专用下拉选项显示框中显示的下拉选项确定出对应的下拉选项，也即，搜索不受数据异步加载的影响。
步骤S25：在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二目标组下拉选项发送到所述专用下拉选项显示框进行增加显示。
同样的，当所述目标下拉选项的数量大于所述已预设数量时，第一组目标下拉选项中并不能加载全部的目标下拉选项，所以需要异步加载第二组目标下拉选项，并在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二目标组下拉选项发送到所述专用下拉选项显示框进行增加显示。
也即，能够对输入的搜索关键字，进行直接过滤，直接显示到搜索框下方。同时，不受异步显示的影响，不是过滤当前已显示的预设数量倍(如20倍)条数的下拉选项，而是过滤全部下拉选项库中所有的数据。例如，现在有一共有100条下拉选项，其中50条aa0至aa49，50条bb0至bb49。默认先显示aa0-aa19，输入关键字b，下拉数据项就会变成bb0-bb19，滚动条第一次触底，就会变成bb0-bb39。
在具体的实施过程中，可以通过angularjs实现前述的高级搜索功能。
在所述专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索之后，还包括：当所述高级搜索框中存在搜索关键字输入时，在所述高级搜索框中添加数据清空标识，以便在获取到点击所述数据清空标识触发的数据清空指令时，将所述高级搜索框中的搜索关键字清空。例如，所述数据清空标识可以为一个×号。所述高级搜索框的数据清空功能可以通过前述的CSS组件来实现。
所述高级搜索框可以进一步提高下拉选择框的输入效率以及便利性，在所述下拉选项为存储***中的逻辑卷时，由于一般逻辑卷的数量都超大，所述高级搜索框可以节约很多时间。
参见图4所示，本申请实施例公开了一种下拉选择框输入装置，包括：
请求获取模块11，用于获取点击下拉选择框触发的下拉选项显示请求；
初始化显示模块12，用于基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示；
异步加载模块13，用于从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数；
增加显示模块14，用于在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示；
输入模块15，用于在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。
可见，本申请先获取点击下拉选择框触发的下拉选项显示请求，然后基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数，在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示，并在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。由此可见，本申请中在获取到点击下拉选择框触发的下拉选项显示请求时，先在页面上渲染下拉选项库中的第一组下拉选项，将第一组下拉选项显示在专用下拉选项显示框中，并异步加载所述下拉选项库中的第二组下拉选项，然后在所述专用下拉选项显示框中的滚动条达到专用下拉选项显示框的底部时，将第二组下拉选项增加显示在述专用下拉选项显示框中，这时所述专用下拉选项显示框中便可以显示第一组下拉选项和第二组下拉选项。首先只是在页面上渲染下拉选项库中的第一组下拉选项，之后的下拉选项通过异步加载的方式进行处理，而不是将全部下拉选项直接生成在页面元素中，从而解决了在下拉选项数据量超大时，下拉框展示和收缩卡顿等卡顿问题。
在一些具体的实施过程中，所述下拉选择框输入装置，还包括：
第一样式设置模块，用于将所述下拉选择框的样式设置成与所述下拉选择框所属页面上的文字输入框和数据输入框相同。
在一些具体的实施过程中，所述下拉选择框输入装置，还包括：
第二样式设置模块，用于将所述专用下拉选项显示框中的下拉选项的显示样式设置成与所述页面中的文字显示样式相同。
在一些具体的实施过程中，所述拉选择框输入装置，还包括：
第三样式设置模块，用于将所述下拉选择框的输入属性配置为必输入项，其中，所述输入属性表示所述下拉选择框为必输入项或选填输入项；当所述下拉选择框的输入选项为空时，为所述下拉选择框在所述用户界面上的位置区域添加输入错误标识。
在一些具体的实施过程中，所述初始化显示模块12，用于：
在所述第一组下拉选项中的下拉选项名称的字符串长度超过所述专用下拉选项显示框的当前最大字符串显示长度时，基于所述第一组下拉选项中的下拉选项名称的字符串长度调整所述专用下拉选项显示框的最大字符串显示长度，以便所述专用下拉选项显示框显示所述第一组下拉选项中的下拉选项名称的字符串长度最长的下拉选项；
相应的，所述输入模块15，用于：如果所述专用下拉选项显示框中显示的被点击的下拉选项的名称的字符串长度超过所述下拉选择框的字符串显示长度，则将所述专用下拉选项显示框中显示的被点击的下拉选项的名称截断后显示在所述下拉选择框中。
在一些具体的实施过程中，所述初始化显示模块12，用于：在所述专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索；
相应的，所述请求获取模块11，用于：获取通过所述高级搜索框输入的搜索关键字；
相应的，所述下拉选择框输入装置，还包括：搜索模块，用于根据所述搜索关键字从所述下拉选项库中确定出目标下拉选项；
相应的，所述初始化显示模块12，用于：将所述目标下拉选项中的第一组目标下拉选项发送到所述专用下拉选项显示框进行显示；
相应的，所述异步加载模块13，用于：从所述目标下拉选项中异步加载第二组目标下拉选项，其中，每组目标下拉选项的下拉选项的数量均为所述预设数量；
相应的，所述增加显示模块14，用于：在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二目标组下拉选项发送到所述专用下拉选项显示框进行增加显示。
在一些具体的实施过程中，所述拉选择框输入装置，还包括：
第四样式设置模块，用于当所述高级搜索框中存在搜索关键字输入时，在所述高级搜索框中添加数据清空标识，以便在获取到点击所述数据清空标识触发的数据清空指令时，将所述高级搜索框中的搜索关键字清空。
参见图5所示，为本申请实施例提供的一种电子设备20的结构示意图，该电子设备20具体可以实现前述实施例中公开的下拉选择框输入方法步骤。
通常，本实施例中的电子设备20包括：处理器21和存储器22。
其中，处理器21可以包括一个或多个处理核心，比如四核心处理器、八核心处理器等。处理器21可以采用DSP(digital signal processing,数字信号处理)、FPGA(field-programmable gate array,现场可编程们阵列)、PLA(programmable logic array,可编程逻辑阵列)中的至少一种硬件来实现。处理器21也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(central processing unit,中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器21可以集成有GPU(graphics processing unit,图像处理器)，GPU用于负责显示屏所需要显示的图像的渲染和绘制。一些实施例中，处理器21可以包括AI(artificialintelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器22可以包括一个或多个计算机可读存储介质，计算机可读存储介质可以是非暂态的。存储器22还可以包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器22至少用于存储以下计算机程序221，其中，该计算机程序被处理器21加载并执行之后，能够实现前述任一实施例中公开的下拉选择框输入方法步骤。
在一些实施例中，电子设备20还可包括有显示屏23、输入输出接口24、通信接口25、传感器26、电源27以及通信总线28。
本技术领域人员可以理解，图5中示出的结构并不构成对电子设备20的限定，可以包括比图示更多或更少的组件。
进一步的，本申请实施例还公开了一种计算机可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现前述任一实施例中公开的下拉选择框输入方法。
其中，关于上述下拉选择框输入方法的具体过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
最后，还需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或者操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得一系列包含其他要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上对本申请所提供的一种下拉选择框输入方法、装置、设备、介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种下拉选择框输入方法，其特征在于，包括：
获取点击下拉选择框触发的下拉选项显示请求；
基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示，并从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数；
在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示；
在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。
2.根据权利要求1所述的下拉选择框输入方法，其特征在于，还包括：
将所述下拉选择框的样式设置成与所述下拉选择框所属页面上的文字输入框和数据输入框相同。
3.根据权利要求2所述的下拉选择框输入方法，其特征在于，还包括：
将所述专用下拉选项显示框中的下拉选项的显示样式设置成与所述页面中的文字显示样式相同。
4.根据权利要求1所述的下拉选择框输入方法，其特征在于，还包括：
将所述下拉选择框的输入属性配置为必输入项，其中，所述输入属性表示所述下拉选择框为必输入项或选填输入项；
当所述下拉选择框的输入选项为空时，为所述下拉选择框在所述用户界面上的位置区域添加输入错误标识。
5.根据权利要求1所述的下拉选择框输入方法，其特征在于，所述基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示的过程中，还包括：
在所述第一组下拉选项中的下拉选项名称的字符串长度超过所述专用下拉选项显示框的当前最大字符串显示长度时，基于所述第一组下拉选项中的下拉选项名称的字符串长度调整所述专用下拉选项显示框的最大字符串显示长度，以便所述专用下拉选项显示框显示所述第一组下拉选项中的下拉选项名称的字符串长度最长的下拉选项；
相应的，所述将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中的过程中，还包括：
如果所述专用下拉选项显示框中显示的被点击的下拉选项的名称的字符串长度超过所述下拉选择框的字符串显示长度，则将所述专用下拉选项显示框中显示的被点击的下拉选项的名称截断后显示在所述下拉选择框中。
6.根据权利要求1至5任一项所述的下拉选择框输入方法，其特征在于，所述获取点击下拉选择框触发的下拉选项显示请求之后，还包括：
在所述专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索；
获取通过所述高级搜索框输入的搜索关键字；
根据所述搜索关键字从所述下拉选项库中确定出目标下拉选项，将所述目标下拉选项中的第一组目标下拉选项发送到所述专用下拉选项显示框进行显示，并从所述目标下拉选项中异步加载第二组目标下拉选项，其中，每组目标下拉选项的下拉选项的数量均为所述预设数量；
在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二目标组下拉选项发送到所述专用下拉选项显示框进行增加显示。
7.根据权利要求6所述的下拉选择框输入方法，其特征在于，所述在所述专用下拉选项显示框中显示高级搜索框，以便通过所述高级搜索框输入搜索关键字进行下拉选项搜索之后，还包括：
当所述高级搜索框中存在搜索关键字输入时，在所述高级搜索框中添加数据清空标识，以便在获取到点击所述数据清空标识触发的数据清空指令时，将所述高级搜索框中的搜索关键字清空。
8.一种下拉选择框输入装置，其特征在于，包括：
请求获取模块，用于获取点击下拉选择框触发的下拉选项显示请求；
初始化显示模块，用于基于所述下拉选项显示请求将下拉选项库中的第一组下拉选项发送到用户界面上的专用下拉选项显示框进行显示；
异步加载模块，用于从所述下拉选项库中异步加载第二组下拉选项，其中，每组下拉选项的下拉选项的数量均为预设数量，且所述预设数量远小于所述下拉选项库中的下拉选项总数；
增加显示模块，用于在监测到所述专用下拉选项显示框中的滚动条到达所述专用下拉选项显示框底部时，将所述第二组下拉选项发送到所述专用下拉选项显示框进行增加显示；
输入模块，用于在获取到点击所述专用下拉选项显示框中显示的下拉选项触发的下拉选择框输入请求时，将所述专用下拉选项显示框中显示的被点击的下拉选项输入到所述下拉选择框中。
9.一种电子设备，其特征在于，包括：
存储器和处理器；
其中，所述存储器，用于存储计算机程序；
所述处理器，用于执行所述计算机程序，以实现权利要求1至7任一项所述的下拉选择框输入方法。
10.一种计算机可读存储介质，其特征在于，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的下拉选择框输入方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011301967.5A CN112464130B (zh) | 2020-11-19 | 2020-11-19 | 一种下拉选择框输入方法、装置、设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011301967.5A CN112464130B (zh) | 2020-11-19 | 2020-11-19 | 一种下拉选择框输入方法、装置、设备及介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112464130A true CN112464130A (zh) | 2021-03-09 |
| CN112464130B CN112464130B (zh) | 2023-01-10 |
Family
ID=74837694
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011301967.5A Active CN112464130B (zh) | 2020-11-19 | 2020-11-19 | 一种下拉选择框输入方法、装置、设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112464130B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114547107A (zh) * | 2022-02-24 | 2022-05-27 | 新奥数能科技有限公司 | 物联数据查询方法、装置、设备及存储介质 |
| CN114779995A (zh) * | 2022-05-20 | 2022-07-22 | 中电云数智科技有限公司 | 一种下拉选项追加选项的交互方法及终端设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109116997A (zh) * | 2017-06-23 | 2019-01-01 | 北京国双科技有限公司 | 一种基于拼音的搜索方法及装置 |
| CN110989981A (zh) * | 2019-11-27 | 2020-04-10 | 北京搜狐新媒体信息技术有限公司 | 一种筛选控件 |
| CN111428164A (zh) * | 2020-03-27 | 2020-07-17 | 五八有限公司 | 页面显示方法、装置、移动终端、电子设备及存储介质 |
-
2020
- 2020-11-19 CN CN202011301967.5A patent/CN112464130B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109116997A (zh) * | 2017-06-23 | 2019-01-01 | 北京国双科技有限公司 | 一种基于拼音的搜索方法及装置 |
| CN110989981A (zh) * | 2019-11-27 | 2020-04-10 | 北京搜狐新媒体信息技术有限公司 | 一种筛选控件 |
| CN111428164A (zh) * | 2020-03-27 | 2020-07-17 | 五八有限公司 | 页面显示方法、装置、移动终端、电子设备及存储介质 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114547107A (zh) * | 2022-02-24 | 2022-05-27 | 新奥数能科技有限公司 | 物联数据查询方法、装置、设备及存储介质 |
| CN114779995A (zh) * | 2022-05-20 | 2022-07-22 | 中电云数智科技有限公司 | 一种下拉选项追加选项的交互方法及终端设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112464130B (zh) | 2023-01-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20070240032A1 (en) | Method and system for vertical acquisition of data from HTML tables | |
| GB2416468A (en) | Document display system | |
| CN112464130B (zh) | 一种下拉选择框输入方法、装置、设备及介质 | |
| US20120089903A1 (en) | Selective content extraction | |
| US20130339840A1 (en) | System and method for logical chunking and restructuring websites | |
| JP2011159284A (ja) | ウェブサイトフォントのプレビュー | |
| CN105095441A (zh) | 一种信息获取方法及装置 | |
| CN113642292B (zh) | 一种树形列表的实现方法、***、设备及存储介质 | |
| CN105528200B (zh) | 浏览器标签页的显示方法及装置 | |
| CN104217036A (zh) | 一种网页内容提取方法和设备 | |
| EP2189883B1 (en) | Method, apparatus and program for facilitating object selection on display screen | |
| US8584011B2 (en) | Document representation transitioning | |
| CN108052212A (zh) | 一种输入文字的方法、终端及计算机可读介质 | |
| CN115629695A (zh) | 应用页面显示方法、装置、设备及存储介质 | |
| CN110018863A (zh) | 一种移动端文本显示方法、存储介质、设备及*** | |
| CN114327733A (zh) | 开机启动交互界面的动态更新方法、装置、设备及介质 | |
| CN114329152A (zh) | 基于浏览器引擎的应用程序生成方法、装置、设备和介质 | |
| JPH11306170A (ja) | ドキュメント作成装置 | |
| CN110515618B (zh) | 页面信息录入优化方法、设备、存储介质及装置 | |
| CN104063118B (zh) | 一种网页内容的点击显示方法及装置 | |
| CN112528184A (zh) | 富文本邮件的发送方法、装置、计算机设备及存储介质 | |
| CN102099806A (zh) | 信息输出装置、信息输出方法和记录介质 | |
| RU2821841C2 (ru) | Способ визуализации, электронное устройство и носитель данных | |
| CN110908570A (zh) | 图像处理方法、装置、终端及存储介质 | |
| CN110851133A (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 |