CN117235397A - Form data input method, device and medium - Google Patents
Form data input method, device and medium Download PDFInfo
- Publication number
- CN117235397A CN117235397A CN202311517221.1A CN202311517221A CN117235397A CN 117235397 A CN117235397 A CN 117235397A CN 202311517221 A CN202311517221 A CN 202311517221A CN 117235397 A CN117235397 A CN 117235397A
- Authority
- CN
- China
- Prior art keywords
- data
- down option
- drop
- user
- target
- 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 58
- 238000004590 computer program Methods 0.000 claims description 11
- 230000008569 process Effects 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 6
- 230000014509 gene expression Effects 0.000 claims description 5
- 230000001419 dependent effect Effects 0.000 claims description 4
- 238000012163 sequencing technique Methods 0.000 claims description 3
- 230000004044 response Effects 0.000 abstract description 8
- 230000003993 interaction Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 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
- 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
Abstract
The application relates to the field of computers, and discloses a form data input method, a form data input device and a form data input medium, wherein the form data input method comprises the following steps: responding to a data input request sent by a user to acquire user input data; determining a target pull-down option corresponding to user input data according to a preset matching rule; generating a document object model element according to the target drop-down option, and displaying the target drop-down option on a drop-down option interface; user selection data is obtained to input the user selection data into the form and the document object model elements are purged. Therefore, according to the technical scheme provided by the application, when the user inputs data, the document object model element is generated according to the target pull-down option corresponding to the user input data so as to be convenient for the user to select, and after the data input is completed, the document object model element is cleared so as to reduce the data volume of the document object model element in the page, thereby improving the response speed of the page.
Description
Technical Field
The application relates to the field of computers, in particular to a form data input method, a form data input device and a form data input medium.
Background
When a user browses a web page or uses an application, data (e.g., user name information, text information, selection options, etc.) needs to be input to the web page and forms in the application to acquire a service. Drop down boxes are a common component of acquiring user data. The currently commonly used drop-down frame components include an el-select component provided by an element ui and a select component provided by an iviewUI, but these drop-down frame components generally store drop-down option data of an input frame in a document object model (Document Object Model, DOM) element, and when there are too many drop-down options, the loading speed of a page is affected, which leads to page jam and affects the use experience of a user.
Therefore, how to provide a new form data input method to prevent the excessive pull-down options of the pull-down frame from affecting the page loading speed is a problem that needs to be solved by those skilled in the art.
Disclosure of Invention
The application aims to solve the technical problems that in the prior art, when data is input into a form through a drop-down frame, the number of page data is excessive due to excessive drop-down frame options stored in a DOM element form in a page, and the loading speed of the page is influenced.
In order to solve the technical problems, the application provides a form data input method, which comprises the following steps:
responding to a data input request sent by a user to acquire user input data;
determining a target pull-down option corresponding to the user input data according to a preset matching rule;
generating a document object model element according to the target pull-down option, and displaying the target pull-down option on a pull-down option interface;
user selection data is acquired to input the user selection data into a form and the document object model elements are cleared.
Preferably, the preset matching rule includes: pinyin matching and fuzzy matching;
correspondingly, the determining the target pull-down option corresponding to the user input data according to the preset matching rule comprises the following steps:
determining target drop-down options corresponding to each preset matching rule in a drop-down option library; the drop-down option library is a database which is arranged at the front end and is used for storing original option data.
Preferably, the determining the target pull-down options corresponding to each preset matching rule in the pull-down option library includes:
acquiring priority information of each preset matching rule, and sequencing the priority of each preset matching rule;
and sequentially determining the target pull-down options corresponding to the preset matching rules according to the priority order of the preset matching rules.
Preferably, the method further comprises:
acquiring a matching rule selection instruction input by a user through a form input button;
and determining priority information of each preset matching rule according to the matching rule selection instruction.
Preferably, the generating a document object model element according to the target drop-down option includes:
acquiring the original option data in the front-end local storage;
and rendering a document object model element which is consistent with the original option data in the drop-down option interface according to the original option data.
Preferably, the method further comprises:
creating a Vue instance for each target drop-down option, and performing data hijacking on the attribute information of the target drop-down option so as to process the data of the Vue instance;
compiling the Vue instance, analyzing the instruction and the expression of the Vue instance, and creating a corresponding monitor to acquire the dependent data of each target pull-down option, thereby establishing the association relation between each target pull-down option and the monitor.
Preferably, after the step of determining the target drop-down option corresponding to the user input data according to the preset matching rule, the method further includes:
if the target drop-down options corresponding to the user input data do not exist in the drop-down option library, recording the user input data and background information corresponding to the user input data;
and generating new drop-down option data according to the user input data and the background information, and storing the drop-down option data into the drop-down option library to update the drop-down options Xiang Ku.
In order to solve the technical problem, the application also provides a form data input device, which comprises:
the acquisition module is used for responding to a data input request sent by a user to acquire user input data;
the determining module is used for determining a target pull-down option corresponding to the user input data according to a preset matching rule;
the generation module is used for generating a document object model element according to the target pull-down option and displaying the target pull-down option on a pull-down option interface;
and the clearing module is used for acquiring user selection data, inputting the user selection data into a form and clearing the document object model element.
In order to solve the technical problem, the application also provides a form data input device, which comprises a memory for storing a computer program;
and the processor is used for realizing the steps of the form data input method when executing the computer program.
In order to solve the above technical problem, the present application further provides a computer readable storage medium, on which a computer program is stored, which when executed by a processor, implements the steps of the form data input method.
The application provides a form data input method, which comprises the following steps: responding to a data input request sent by a user to acquire user input data; determining a target pull-down option corresponding to user input data according to a preset matching rule; generating a document object model element according to the target drop-down option, and displaying the target drop-down option on a drop-down option interface; user selection data is obtained to input the user selection data into the form and the document object model elements are purged. Therefore, according to the technical scheme provided by the application, when the user inputs data, the document object model element is generated according to the target pull-down option corresponding to the user input data so as to be convenient for the user to select, and after the data input is completed, the document object model element is cleared so as to reduce the data volume of the document object model element in the page, thereby improving the response speed of the page.
In addition, the application also provides a form data input device and a medium, which correspond to the method and have the same effects.
Drawings
For a clearer description of embodiments of the present application, the drawings that are required to be used in the embodiments will be briefly described, it being apparent that the drawings in the following description are only some embodiments of the present application, and other drawings may be obtained according to the drawings without inventive effort for those skilled in the art.
FIG. 1 is a flowchart of a form data input method provided by an embodiment of the present application;
FIG. 2 is a block diagram of a form data input device according to an embodiment of the present application;
fig. 3 is a block diagram of another form data input device according to an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present application will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present application, but not all embodiments. Based on the embodiments of the present application, all other embodiments obtained by a person of ordinary skill in the art without making any inventive effort are within the scope of the present application.
The core of the application is to provide a form data input method, a form data input device and a form data input medium, so as to reduce the data quantity of file object model elements in a page and improve the response speed of the page and the use experience of a user.
Currently, common drop-down frame components (such as el-select of Element UI and select component of iview UI) can provide drop-down selection function, including searchable drop-down components, but these components often have not been fully considered, and under the condition of large data volume, more DOM elements are saved in the page, so that the page is jammed or even blocked. In order to solve the technical problem, the application provides a form data input method, which generates a document object model element according to a target pull-down option corresponding to user input data when the user inputs the data so as to facilitate the user to select, and clears the document object model element after finishing data input so as to reduce the data quantity of the document object model element in a page, thereby improving the response speed of the page.
In order to better understand the aspects of the present application, the present application will be described in further detail with reference to the accompanying drawings and detailed description.
Fig. 1 is a flowchart of a form data input method provided by an embodiment of the present application, as shown in fig. 1, where the method includes:
s10: responding to a data input request sent by a user to acquire user input data;
s11: determining a target pull-down option corresponding to user input data according to a preset matching rule;
s12: generating a document object model element according to the target drop-down option, and displaying the target drop-down option on a drop-down option interface;
s13: user selection data is obtained to input the user selection data into the form and the document object model elements are purged.
The technical scheme provided by the application is applied to the user interaction page provided by the webpage or the application program, and the user inputs data into the form through an input box in the interaction page so as to acquire the service provided by the interaction page.
In specific implementation, the interaction page responds to a data input request sent by a user to acquire user input data, and a drop-down option matched with the user input data is displayed in a drop-down option interface, so that the user can conveniently input the data in the drop-down option interface into a drop-down input box in a mode of clicking a mouse or selecting a keyboard cursor, and data interaction is achieved.
It will be appreciated that the target drop-down options for the web page are stored in either the front-end storage area or the back-end storage area in the form of common data, and when the data entered by the user matches the data of any drop-down option, the drop-down option that matches is referred to as the target drop-down option. And generating a document object model element according to the target drop-down option, and displaying the target drop-down option on a drop-down option interface so as to facilitate the user to select the corresponding option. It should be noted that after the document object model element is generated, the relevant data of the target drop-down option is stored in the form of the document object model element, when the document object model element is too many in the page, the page will be blocked, so when the user finishes inputting (i.e. the user selection data is acquired), the document object model element corresponding to the text box needs to be cleared, so as to reduce the data volume of the page. Wherein the document object model is an interface (Application Programming Interface, API) for manipulating web page content. In the DOM, we can manipulate XML or HTML documents in a programming language (e.g., javaScript). DOM structures a document into a tree of nodes, which enables us to alter the content and structure of the document. There are many types of nodes in the DOM. For example, element nodes may correspond to respective element tags of HTML or XML, and attribute nodes may correspond to respective attributes of elements. Once a particular DOM element is obtained, various operations can be performed, such as changing the content of the element, modifying the attributes of the element, changing the style of the element, or modifying the structure of the element (such as inserting new sub-elements or deleting existing sub-elements).
The application provides a form data input method, which comprises the following steps: responding to a data input request sent by a user to acquire user input data; determining a target pull-down option corresponding to user input data according to a preset matching rule; generating a document object model element according to the target drop-down option, and displaying the target drop-down option on a drop-down option interface; user selection data is obtained to input the user selection data into the form and the document object model elements are purged. Therefore, according to the technical scheme provided by the application, when the user inputs data, the document object model element is generated according to the target pull-down option corresponding to the user input data so as to be convenient for the user to select, and after the data input is completed, the document object model element is cleared so as to reduce the data volume of the document object model element in the page, thereby improving the response speed of the page.
It is understood that the preset matching rule is a matching rule predetermined by the service provider, and the common matching rule includes fuzzy matching, english matching, pinyin matching, and the like. After the user starts the man-machine interaction window, relevant data are input into the input box, and the current page automatically matches the drop-down options corresponding to the input data according to the matching rules so as to be convenient for the user to select.
Specifically, determining, according to a preset matching rule, a target pull-down option corresponding to user input data includes: determining target drop-down options corresponding to each preset matching rule in a drop-down option library; the drop-down option library is a database which is arranged at the front end and is locally stored and used for storing original option data.
In specific implementation, the preset matching rule may be one or more, which is not limited herein.
On the basis of the above embodiment, when there are a plurality of preset matching rules, determining the target pull-down options corresponding to each preset matching rule in the pull-down option library includes: acquiring priority information of each preset matching rule, and sequencing the priority of each preset matching rule; and sequentially determining target drop-down options corresponding to the preset matching rules according to the priority order of the preset matching rules.
For example: when the priority of pinyin matching, fuzzy matching and English matching is gradually reduced, after the user inputs data, firstly matching the data input by the user according to the pinyin matching rule, and if the related data is not matched or the matched data quantity is smaller than a threshold value, matching the data input by the user according to the fuzzy matching rule; and if the related data are still not matched or the matched data quantity is smaller than the threshold value, matching the data input by the user according to the English matching rule.
It will be appreciated that the priorities of the different matching rules may be rules predetermined by the service provider or may be set by the user himself.
On the basis of the above embodiment, the form data input method further includes: acquiring a matching rule selection instruction input by a user through a form input button; and determining priority information of each preset matching rule according to the matching rule selection instruction.
In the implementation, an input frame is added first, and bidirectional binding is customized so as to facilitate the subsequent processing of data, and various methods required by a drop-down frame are added to complete initialization. By setting tips valCanblank it is determined whether it is necessary to reset back the previous content if the query content does not match the directory list. If the searched content is empty or not empty with the directory, displaying as the first item by default, or not processing the content of the input box by default and not modifying the content of the query directory. Judging whether the swing of pinyin is supported or not through a propsuppport Pinyin Filter field, and if so, initializing a pinyin query method. The configuration process of other matching rules is similar to this. When the drop-down directory is selected or closed each time, the original drop-down option list is added with a timer to carry out clearing treatment, so that the existence of DOM elements in the page is reduced, the consumption of performance is reduced, and the response speed of the page is improved.
In implementations, generating the document object model element from the target drop-down option includes: acquiring original option data in front-end local storage; and rendering document object model elements corresponding to the original option data in the drop-down option interface according to the original option data.
In one embodiment of the present application, after current original data is read from a cache of a browser, a DOM structure corresponding to the current original data is rendered in a vanishing window of the browser according to the current original data, where the DOM structure includes any one or more of an input text box, a checkbox check box, a radio single selection box, a select drop-down box, a common help box, a longtext long text edit box, a datepicker time selection box, and a diyinput custom edit type. For example, after the user scrolls the employee information table to the target area, the user stops scrolling, edits the information of the employees in the range, and renders each DOM structure in the target area according to the read current original data, wherein the first column is the name of the employee, the DOM type is an input text box, the second column is the gender, the DOM type is a radio single box, the third column is the birth month, the DOM type is a datepicker time box, the fourth column is the business year, the DOM type is a select drop-down box, and the like.
As a preferred embodiment, after the step of determining the target drop-down option corresponding to the user input data according to the preset matching rule, the method further includes: if the target drop-down options corresponding to the user input data do not exist in the drop-down option library, recording the user input data and background information corresponding to the user input data; new pull-down option data is generated according to the user input data and the background information, and the pull-down option data is stored in a pull-down option library to update the pull-down options Xiang Ku.
Further, two-way data binding is required for each target drop-down option. Specifically, a Vue instance is created for each target drop-down option, and data hijacking is carried out on the attribute information of the target drop-down option so as to process the data of the Vue instance;
compiling the Vue instance, analyzing the instruction and the expression of the Vue instance, and creating a corresponding monitor to acquire the dependent data of each target pull-down option, thereby establishing the association relationship between each target pull-down option and the monitor, and further completing the bidirectional data binding.
When the Vue instance is created, vue2 will hijack all the attributes in the data option of the target drop-down option. This converts each attribute into a get and a set by using the object. Define property () method, and triggers a corresponding operation when data is accessed or modified.
Creation of a watch listener: when the template is compiled, vue2 parses the instructions and expressions in the template and creates the corresponding watch listener. Each watch is associated with a piece of data, is responsible for listening for changes to that data, and updates the associated view.
Dependency collection: in the template compiling process, the Watcher automatically collects data (such as data, computed, props and the like) depending on the target pull-down option, and an association relationship between the data and the Watcher is established. Thus, when the data changes, the corresponding watch which needs to be updated can be found and notified to update.
Publish-subscribe mode: when the data changes, the data hijacking triggers the setter function and invokes the dispatch center of the publish-subscribe mode. The dispatch center will sequentially notify these watches for updates based on the relevant watch list collected by the dependencies.
View update: each notified watch will perform a corresponding update operation, such as re-rendering the view or updating the DOM element. In this way, changes in data can be reflected in real-time into the view.
In the above embodiment, the form data input method is described in detail, and the application also provides a corresponding embodiment of the form data input device. It should be noted that the present application describes an embodiment of the device portion from two angles, one based on the angle of the functional module and the other based on the angle of the hardware.
Fig. 2 is a structural diagram of a form data input device provided by an embodiment of the present application, as shown in fig. 2, the device includes:
an acquisition module 10 for acquiring user input data in response to a data input request sent by a user;
a determining module 11, configured to determine a target drop-down option corresponding to user input data according to a preset matching rule;
the generating module 12 is used for generating a document object model element according to the target drop-down option and displaying the target drop-down option on a drop-down option interface;
the clearing module 13 is configured to obtain user selection data, input the user selection data to the form, and clear the document object model element.
In addition, the form data input device provided by the application further comprises a priority information determining module, a pull-down option association module and a pull-down option library updating module.
The priority information determining module is used for acquiring a matching rule selection instruction input by a user through a form input button; and determining priority information of each preset matching rule according to the matching rule selection instruction.
The drop-down option association module is used for creating a Vue instance for each target drop-down option, and carrying out data hijacking on the attribute information of the target drop-down option so as to process the data of the Vue instance; compiling the Vue instance, analyzing the instruction and the expression of the Vue instance, and creating a corresponding monitor to acquire the dependent data of each target pull-down option, thereby establishing the association relation between each target pull-down option and the monitor.
The drop-down selection Xiang Ku updating module is used for recording the user input data and background information corresponding to the user input data if the target drop-down options corresponding to the user input data do not exist in the drop-down option library after the step of determining the target drop-down options corresponding to the user input data according to the preset matching rule; new pull-down option data is generated according to the user input data and the background information, and the pull-down option data is stored in a pull-down option library to update the pull-down options Xiang Ku.
Since the embodiments of the apparatus portion and the embodiments of the method portion correspond to each other, the embodiments of the apparatus portion are referred to the description of the embodiments of the method portion, and are not repeated herein.
The embodiment provides a form data input device, including: responding to a data input request sent by a user to acquire user input data; determining a target pull-down option corresponding to user input data according to a preset matching rule; generating a document object model element according to the target drop-down option, and displaying the target drop-down option on a drop-down option interface; user selection data is obtained to input the user selection data into the form and the document object model elements are purged. Therefore, according to the technical scheme provided by the application, when the user inputs data, the document object model element is generated according to the target pull-down option corresponding to the user input data so as to be convenient for the user to select, and after the data input is completed, the document object model element is cleared so as to reduce the data volume of the document object model element in the page, thereby improving the response speed of the page.
Fig. 3 is a structural diagram of a form data input device according to another embodiment of the present application, and as shown in fig. 3, the form data input device includes: a memory 20 for storing a computer program;
the processor 21 is configured to implement the steps of the form data input method according to the above embodiment when executing the computer program.
The form data input device provided in this embodiment may include, but is not limited to, a smart phone, a tablet computer, a notebook computer, a desktop computer, or the like.
Processor 21 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 21 may be implemented in hardware in at least one of a digital signal processor (Digital Signal Processor, DSP), a Field programmable gate array (Field-Programmable Gate Array, FPGA), a programmable logic array (Programmable Logic Array, PLA). The processor 21 may also comprise a main processor, which is a processor for processing data in an awake state, also called central processor (Central Processing Unit, CPU), and a coprocessor; a coprocessor is a low-power processor for processing data in a standby state. In some embodiments, the processor 21 may be integrated with an image processor (Graphics Processing Unit, GPU) for taking care of rendering and rendering of the content that the display screen is required to display. In some embodiments, the processor 21 may also include an artificial intelligence (Artificial Intelligence, AI) processor for processing computing operations related to machine learning.
Memory 20 may include one or more computer-readable storage media, which may be non-transitory. Memory 20 may also include high-speed random access memory, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In this embodiment, the memory 20 is at least used for storing a computer program 201, where the computer program, after being loaded and executed by the processor 21, can implement the relevant steps of the form data input method disclosed in any of the foregoing embodiments. In addition, the resources stored in the memory 20 may further include an operating system 202, data 203, and the like, where the storage manner may be transient storage or permanent storage. The operating system 202 may include Windows, unix, linux, among others. The data 203 may include, but is not limited to, user input data, user selection data, and the like.
In some embodiments, the form data input device may further include a display 22, an input/output interface 23, a communication interface 24, a power supply 25, and a communication bus 26.
It will be appreciated by those skilled in the art that the structure shown in fig. 3 is not limiting of the form data input device and may include more or fewer components than shown.
The form data input device provided by the embodiment of the application comprises a memory and a processor, wherein the processor can realize the following method when executing a program stored in the memory: responding to a data input request sent by a user to acquire user input data; determining a target pull-down option corresponding to user input data according to a preset matching rule; generating a document object model element according to the target drop-down option, and displaying the target drop-down option on a drop-down option interface; user selection data is obtained to input the user selection data into the form and the document object model elements are purged.
Finally, the application also provides a corresponding embodiment of the computer readable storage medium. The computer-readable storage medium has stored thereon a computer program which, when executed by a processor, performs the steps as described in the method embodiments above.
It will be appreciated that the methods of the above embodiments, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored on a computer readable storage medium. Based on this understanding, the technical solution of the present application may be embodied essentially or in part or all of the technical solution or in part in the form of a software product stored in a storage medium for performing all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RanDOM Access Memory, RAM), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
The form data input method, the form data input device and the form data input medium provided by the application are described in detail. In the description, each embodiment is described in a progressive manner, and each embodiment is mainly described by the differences from other embodiments, so that the same similar parts among the embodiments are mutually referred. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant points refer to the description of the method section. It should be noted that it will be apparent to those skilled in the art that various modifications and adaptations of the application can be made without departing from the principles of the application and these modifications and adaptations are intended to be within the scope of the application as defined in the following claims.
It should also be noted that in this specification, relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
Claims (10)
1. The form data input method is characterized by comprising the following steps of:
responding to a data input request sent by a user to acquire user input data;
determining a target pull-down option corresponding to the user input data according to a preset matching rule;
generating a document object model element according to the target pull-down option, and displaying the target pull-down option on a pull-down option interface;
user selection data is acquired to input the user selection data into a form and the document object model elements are cleared.
2. The form data input method according to claim 1, wherein the preset matching rule includes: pinyin matching and fuzzy matching;
correspondingly, the determining the target pull-down option corresponding to the user input data according to the preset matching rule comprises the following steps:
determining the target pull-down options corresponding to each preset matching rule in a pull-down option library; the drop-down option library is a database which is arranged at the front end and is used for storing original option data.
3. The form data input method according to claim 2, wherein determining the target pull-down option corresponding to each preset matching rule in the pull-down option library includes:
acquiring priority information of each preset matching rule, and sequencing the priority of each preset matching rule;
and sequentially determining the target pull-down options corresponding to the preset matching rules according to the priority order of the preset matching rules.
4. The form data input method of claim 3, further comprising:
acquiring a matching rule selection instruction input by a user through a form input button;
and determining priority information of each preset matching rule according to the matching rule selection instruction.
5. The form data input method of claim 2, wherein the generating a document object model element according to the target drop-down option comprises:
acquiring the original option data in the front-end local storage;
and rendering a document object model element which is consistent with the original option data in the drop-down option interface according to the original option data.
6. The form data input method according to any one of claims 1 to 5, characterized by further comprising:
creating a Vue instance for each target drop-down option, and performing data hijacking on the attribute information of the target drop-down option so as to process the data of the Vue instance;
compiling the Vue instance, analyzing the instruction and the expression of the Vue instance, and creating a corresponding monitor to acquire the dependent data of each target pull-down option, thereby establishing the association relation between each target pull-down option and the monitor.
7. The form data input method according to claim 2, wherein after the step of determining the target drop-down option corresponding to the user input data according to the preset matching rule, further comprises:
if the target drop-down options corresponding to the user input data do not exist in the drop-down option library, recording the user input data and background information corresponding to the user input data;
and generating new drop-down option data according to the user input data and the background information, and storing the drop-down option data into the drop-down option library to update the drop-down options Xiang Ku.
8. A form data input device, comprising:
the acquisition module is used for responding to a data input request sent by a user to acquire user input data;
the determining module is used for determining a target pull-down option corresponding to the user input data according to a preset matching rule;
the generation module is used for generating a document object model element according to the target pull-down option and displaying the target pull-down option on a pull-down option interface;
and the clearing module is used for acquiring user selection data, inputting the user selection data into a form and clearing the document object model element.
9. Form data input device, characterized in that it comprises a memory for storing a computer program;
a processor for implementing the steps of the form data input method according to any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium, wherein a computer program is stored on the computer-readable storage medium, which when executed by a processor, implements the steps of the form data input method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311517221.1A CN117235397B (en) | 2023-11-14 | 2023-11-14 | Form data input method, device and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311517221.1A CN117235397B (en) | 2023-11-14 | 2023-11-14 | Form data input method, device and medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117235397A true CN117235397A (en) | 2023-12-15 |
| CN117235397B CN117235397B (en) | 2024-03-15 |
Family
ID=89096943
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311517221.1A Active CN117235397B (en) | 2023-11-14 | 2023-11-14 | Form data input method, device and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117235397B (en) |
Citations (9)
| 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 |
| CN103793499A (en) * | 2010-12-07 | 2014-05-14 | 奇智软件（北京）有限公司 | Method and device for obtaining application information through address bar of browser |
| CN103885943A (en) * | 2012-12-19 | 2014-06-25 | 北大方正集团有限公司 | Method for achieving drop-down list box control in webpage |
| CN109408056A (en) * | 2018-10-15 | 2019-03-01 | 四川长虹电器股份有限公司 | A kind of combobox component |
| CN111222066A (en) * | 2019-12-31 | 2020-06-02 | 航天信息股份有限公司广州航天软件分公司 | Pull-down component system and method for event processing and searching |
| CN112114726A (en) * | 2020-07-31 | 2020-12-22 | 福建亿能达信息技术股份有限公司 | Interaction method, device, equipment and medium based on vue drop-down box |
| CN114254228A (en) * | 2021-12-20 | 2022-03-29 | 杭州安恒信息技术股份有限公司 | Web application processing method and related device for dynamically binding data |
| CN114995904A (en) * | 2022-05-31 | 2022-09-02 | 中国银行股份有限公司 | Pull-down frame component loading method and related device |
| CN115712769A (en) * | 2022-11-22 | 2023-02-24 | 四川启睿克科技有限公司 | Method for realizing Input and pull-down and fuzzy search based on Input label |
-
2023
- 2023-11-14 CN CN202311517221.1A patent/CN117235397B/en active Active
Patent Citations (9)
| 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 |
| CN103793499A (en) * | 2010-12-07 | 2014-05-14 | 奇智软件（北京）有限公司 | Method and device for obtaining application information through address bar of browser |
| CN103885943A (en) * | 2012-12-19 | 2014-06-25 | 北大方正集团有限公司 | Method for achieving drop-down list box control in webpage |
| CN109408056A (en) * | 2018-10-15 | 2019-03-01 | 四川长虹电器股份有限公司 | A kind of combobox component |
| CN111222066A (en) * | 2019-12-31 | 2020-06-02 | 航天信息股份有限公司广州航天软件分公司 | Pull-down component system and method for event processing and searching |
| CN112114726A (en) * | 2020-07-31 | 2020-12-22 | 福建亿能达信息技术股份有限公司 | Interaction method, device, equipment and medium based on vue drop-down box |
| CN114254228A (en) * | 2021-12-20 | 2022-03-29 | 杭州安恒信息技术股份有限公司 | Web application processing method and related device for dynamically binding data |
| CN114995904A (en) * | 2022-05-31 | 2022-09-02 | 中国银行股份有限公司 | Pull-down frame component loading method and related device |
| CN115712769A (en) * | 2022-11-22 | 2023-02-24 | 四川启睿克科技有限公司 | Method for realizing Input and pull-down and fuzzy search based on Input label |
Non-Patent Citations (3)
| Title |
|---|
| 唐斌斌;叶奕;: "Vue.js在前端开发应用中的性能影响研究", 电子制作, no. 10 * |
| 张哲: "短视频社区 产品 运营与商业化", 30 June 2022, 北京：机械工业出版社, pages: 81 * |
| 马利军: "Web 前端架构模式的演化及MVVM 模式在 Web 前端框架中的研究", 软件, vol. 44, no. 7 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117235397B (en) | 2024-03-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR101312867B1 (en) | Markup based extensibility for user interfaces | |
| 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 | |
| US10055392B2 (en) | History-based archive management | |
| JP7395475B2 (en) | System and method for generating and editing text content in a website construction system | |
| US9535667B2 (en) | Content collapse outside of selection | |
| AU2017304396A1 (en) | System and method for implementing containers which extract and apply semantic page knowledge | |
| KR102345002B1 (en) | Patent document creating device, method, computer program, computer-readable recording medium, server and system | |
| Ashok et al. | Web screen reading automation assistance using semantic abstraction | |
| JP2011159284A (en) | Website font previewing | |
| KR20150085716A (en) | Setup Method for Web Scraping Data Extraction | |
| Whiting et al. | Creating an iPhone application for collecting continuous ABC data | |
| CN114036443A (en) | Page generation method and device | |
| KR20040005939A (en) | Method and system in an office application for providing content dependent help information | |
| Leiva | Restyling website design via touch-based interactions | |
| US9128917B2 (en) | Automatic content expansion indicators | |
| CN107783983B (en) | Information display method and device | |
| CN117235397B (en) | Form data input method, device and medium | |
| US20020059233A1 (en) | Method and system in an electronic spreadsheet for applying user-defined options | |
| CN114090002A (en) | Front-end interface construction method and device, electronic equipment and storage medium | |
| Aryal | Bootstrap: a front-end framework for responsive web design | |
| Tablan et al. | Gate, an Application Developer’s Guide | |
| KR20190014195A (en) | System and method for presenting fonts through retrieval | |
| TWI834538B (en) | Interface generating system and interface generating method |
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 |