Web form-oriented input recommendation method and device, and electronic equipment

Abstract

The application relates to the computer technical field and discloses a web form-oriented input recommendation method and device and electronic equipment, the method comprising the following steps: in the browser local storage, taking a field identifier as a key name, a storage record containing user historical input values and corresponding weight values is established; in response to a user input operation on an input component, a current input value is acquired, a weight value corresponding to the current input value is updated according to a preset attenuation factor and a time factor, and the updated weight value is saved to the browser local storage; at least one historical input value is selected to generate a recommendation list according to the weight values corresponding to the historical input values under a current field in the browser local storage; and the recommendation list is rendered and displayed. Through the technical scheme, the problems of privacy leakage and low efficiency of web form input recommendation in the related art are solved, and the efficiency and privacy security of form input recommendation are significantly improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically to input recommendation methods, apparatus, and electronic devices for web forms. Background Technology

[0002] With the rapid development of internet technology, web forms have become an important medium for user information interaction, widely used in various business scenarios such as registration and login, order filling, and information inquiry. How to improve form filling efficiency and enhance user experience has become a continuous concern for those skilled in the art.

[0003] Currently, common form completion assistance solutions mainly include the following: First, the browser's native autofill function. This function relies on the browser's global history, displaying historical input values ​​for the user to choose from when they click on an input box. However, this solution cannot distinguish the semantic differences between different fields; for example, it's easy to mistakenly enter a work phone number as a home phone number, and the recommended results are only sorted in reverse chronological order, lacking intelligent sorting capabilities. Second, cloud-based intelligent recommendation solutions. This solution collects user behavior data, uploads it to a server, and uses algorithms such as collaborative filtering to generate personalized recommendations. However, this solution has significant privacy risks. User data needs to be uploaded to a third-party server, making it difficult to meet increasingly stringent data security regulations. Furthermore, network requests introduce significant response latency, impacting user experience.

[0004] In summary, among related technologies, web form input recommendation suffers from privacy leaks and low efficiency. Summary of the Invention

[0005] This application provides a method, apparatus, and electronic device for recommending input for web forms, in order to solve the problems of privacy leakage and low efficiency in web form input recommendation.

[0006] Firstly, this application provides an input recommendation method for web forms, the method comprising: In the browser's local storage, a storage record containing the user's historical input values ​​and the corresponding weight values ​​of the user's historical input values ​​is created, using the field identifier as the key name. In response to the user's input operation on the input component, the current input value is obtained, the weight value corresponding to the current input value is updated according to the preset decay factor and time factor, and the updated weight value is saved to the browser's local storage; Based on the weight values ​​corresponding to each historical input value under the current field in the browser's local storage, at least one historical input value is selected to generate a recommendation list; Render and display the list of recommendations.

[0007] In one optional implementation, the weight value corresponding to the current input value is updated according to a preset decay factor and a time factor, including: Get the current weight value and last usage time of the current input value; Calculate the time interval between the current time and the last time used; The current weight value is updated based on the decay factor and time interval to obtain a new weight value.

[0008] In one alternative implementation, the time interval is calculated in days, and the attenuation factor is between 0.8 and 0.99.

[0009] In one optional implementation, a storage record containing the user's historical input values ​​and their corresponding weight values ​​is created in the browser's local storage, using the field identifier as the key, including: The current domain name is used as the first-level namespace, and the field identifier is used as the second-level namespace, so that the storage records of different domain names and different fields are stored in isolation.

[0010] In one alternative implementation, selecting at least one historical input value to generate a recommendation list includes: Retrieves all historical input values ​​and their corresponding weights for the current field from the browser's local storage. Sort the historical input values ​​in descending order of their weight values; Select the top-ranked historical input values ​​as the recommendation list.

[0011] In one alternative implementation, the user's input operation on the input component includes: In response to the input field gaining focus, generate and display a list of recommendations; In response to a change event triggered by the content in the input field, the current input value is debounced and delayed, and the recommendation list is updated.

[0012] Secondly, this application provides an input recommendation device for web forms, the device comprising: The module is used to create storage records in the browser's local storage, using field identifiers as keys, containing the user's historical input values ​​and their corresponding weight values. The update module is used to respond to the user's input operation on the input component, obtain the current input value, update the weight value corresponding to the current input value according to the preset decay factor and time factor, and save the updated weight value to the browser's local storage; The generation module is used to select at least one historical input value to generate a recommendation list based on the weight values ​​corresponding to each historical input value under the current field in the browser's local storage. The presentation module is used to render and display the recommendation list.

[0013] Thirdly, this application provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the web form input recommendation method described in the first aspect or any corresponding embodiment.

[0014] Fourthly, this application provides a computer-readable storage medium storing computer instructions for causing a computer to perform the web-based form input recommendation method described in the first aspect or any of its corresponding embodiments.

[0015] Fifthly, this application provides a computer program product, including computer instructions for causing a computer to execute the web-form-oriented input recommendation method described in the first aspect or any corresponding embodiment thereof.

[0016] According to the input recommendation method for web forms provided in this application, the following beneficial technical effects can be achieved compared with the prior art: By storing user data in the browser's local storage, the privacy risks associated with data uploads are fundamentally eliminated. Field identifiers are used for isolated storage, accurately distinguishing historical data across different fields and resolving the issue of cross-field confusion caused by browser autofill. A time decay factor is introduced to dynamically adjust weights, ensuring the recommendation list reflects both long-term usage habits and recent behavioral changes, achieving intelligent dynamic sorting of recommendation results. The recommendation list is generated based on high-frequency historical values ​​selected according to weighted sorting, ensuring that recommended content matches the user's current input scenario and effectively reducing input time. The recommendation list is rendered in real-time near the input component, providing convenient interactive entry points and further optimizing the user experience. This solution significantly improves the accuracy and efficiency of form input recommendations while protecting user privacy. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in the specific embodiments of this application or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0018] Figure 1 This is a schematic diagram illustrating an application scenario according to an embodiment of this application; Figure 2 This is a flowchart of an input recommendation method for web forms according to an embodiment of this application; Figure 3 This is a schematic diagram of a process for determining a recommendation list according to an embodiment of this application; Figure 4 This is a flowchart illustrating another web form input recommendation method according to an embodiment of this application; Figure 5 This is a structural block diagram of an input recommendation device for web forms according to an embodiment of this application; Figure 6 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0020] It is understood that before using the technical solutions disclosed in the various embodiments of this application, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this application in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0021] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0022] As one optional application scenario in the embodiments of this application, such as Figure 1 As shown, application 101 is installed in terminal device 110, and user 130 can interact with application 101 through terminal device 110 and / or access device of terminal device 110.

[0023] For example, application 101 can be any application that provides question-and-answer related services. For instance, application 101 could be a question-and-answer interactive application, such as a text-to-text application, an image-to-text application, etc. Figure 1 In the application scenario shown, if application 101 is active, the terminal device 110 can display the interface 102 of application 101. The interface 102 may include various pages that application 101 can provide, such as interactive pages, settings pages, query pages, etc.

[0024] In some embodiments, terminal device 110 is communicatively connected to server 120 to provide services to application 101. Terminal device 110 may be a mobile terminal, fixed terminal, or portable terminal, etc., including but not limited to mobile phones, desktop computers, laptop computers, multimedia tablets, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, terminal device 110 may also support any type of interface, and server 120 may be various types of computing systems or servers capable of providing computing power, including but not limited to mainframes, edge computing nodes, computing devices in cloud environments, etc.

[0025] It should be noted that, Figure 1 This is merely an example of an application scenario and does not limit the scope of protection of this application.

[0026] The embodiments of this application will be described below with reference to the accompanying drawings. It should be understood that the pages shown in the drawings are merely examples, and various page designs are possible in practice. The various graphic elements on the page may have different arrangements and different visual representations, one or more elements may be omitted or replaced, and one or more other elements may also be present; no limitations are imposed on the embodiments of this application. Furthermore, the embodiments are primarily described below with reference to terminal device 110. It should be understood that the actions described relative to terminal device 110 can be performed by application 101 on terminal device 110, or can be performed by application 101 in conjunction with its server (e.g., server 120).

[0027] This application provides an input recommendation method for web forms, which dynamically updates weights through local storage and time decay factors to protect data privacy and achieve intelligent ranking and recommendation.

[0028] As one optional application scenario in the embodiments of this application, such as Figure 1 As shown, the structural components of the product are introduced in conjunction with specific scenarios.

[0029] According to an embodiment of this application, an embodiment of an input recommendation method for web forms is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0030] This embodiment provides an input recommendation method for web forms, which can be used on the aforementioned mobile terminals, such as mobile phones and tablets. Figure 2This is a flowchart of an input recommendation method for web forms according to an embodiment of this application, such as... Figure 2 As shown, the process includes the following steps: Step S201: In the browser's local storage, create a storage record containing the user's historical input values ​​and the corresponding weight values ​​of the user's historical input values, using the field identifier as the key name.

[0031] Specifically, a web form refers to an interactive interface on a webpage used for user input, including components such as input boxes and drop-down menus, such as login forms and shipping address forms. Browser local storage refers to the client-side data storage mechanism provided by the browser (such as localStorage), where data is stored locally by the user and not sent to the server upon request. A field identifier is a tag used to uniquely identify a specific input field in a form, such as the name attribute of an input box or a custom attribute, such as "address_city" or "user_email". A key name is the name used to access data in local storage; in this solution, the field identifier is used as the key name. User history input values ​​refer to the specific content that the user has entered in the past for that field, such as "Beijing" or "Shanghai" in the shipping address field. A storage record refers to a data entry saved in local storage; each record contains information such as historical input values, their corresponding weight values, and the last used timestamp.

[0032] In the browser's local storage, each form field is assigned a separate data record using its identifier as the key, recording the user's historical input values ​​and their weights. By storing user data locally and implementing field-level isolation, an accurate and secure data foundation is provided for subsequent intelligent recommendations. This avoids the privacy risks associated with uploading data to the cloud and also resolves the issue of cross-field obfuscation during browser autofill.

[0033] In one possible implementation, when a user enters a city in the shipping address input box on a shopping website, the system uses the field identifier "address_city" as the key name of localStorage to store the names of cities that the user has entered in the past. Each city corresponds to a weight value and a last used timestamp. For example, the stored records are {"Beijing": {"count":15.32, "lastUsed":1698765432100}, "Shanghai": {...}}.

[0034] Step S202: In response to the user's input operation on the input component, obtain the current input value, update the weight value corresponding to the current input value according to the preset decay factor and time factor, and save the updated weight value to the browser's local storage.

[0035] Specifically, input components refer to interactive elements on a webpage that receive user input, including text input boxes, drop-down selection boxes, etc., such as shipping address input boxes and mobile phone number input boxes. The current input value refers to the specific content submitted by the user in this input operation, such as "Chaoyang District, Beijing". The decay factor is a coefficient used to reduce the weight of historical data, with a value between 0.8 and 0.99, used to balance the impact of historical usage frequency and recent usage behavior on recommendation results. The time factor refers to the time interval between the current time and the last time the input value was used, usually calculated in days, used to measure the freshness of the data.

[0036] When a user inputs data, the weight of the current input value is updated according to a preset decay factor and time interval, and the updated weight is saved back to local storage. Through the time decay mechanism, frequently used input values ​​are given higher weights, while the weights of long-unused input values ​​gradually decrease, thereby achieving dynamic and intelligent sorting of the recommendation list, reflecting both long-term usage habits and responding to short-term behavioral changes.

[0037] In one possible implementation, when a user enters "Haidian District, Beijing" in the company address input box, the system obtains the current weight value of the field (12.5) and the last used time (60 days ago). The calculation time interval is 60 days, the preset decay factor is 0.95, and the new weight value is calculated to be approximately 1.72 (due to significant decay from long-term inactivity) according to the formula "new weight = 12.5 × 0.95^60 + 1". The updated weight value and the current timestamp are then saved to local storage.

[0038] Step S203: Based on the weight values ​​corresponding to each historical input value under the current field in the browser's local storage, select at least one historical input value to generate a recommendation list.

[0039] Specifically, the recommendation list refers to the set of optional items presented to the user after the system sorts them according to weight. It is usually displayed as a floating drop-down menu near the input component for the user to click and select. For example, options such as "Beijing", "Shanghai", and "Guangzhou" are displayed below the shipping address input box.

[0040] The system reads all historical input values ​​for the current field and their corresponding weight values ​​from local storage, sorts them by weight from high to low, and selects the highest-weighted historical input values ​​to generate a recommendation list. This weight-based sorting and selection mechanism ensures that frequently used and recently active input values ​​are displayed first, improving the relevance of recommended content to the user's current needs and thus increasing form completion efficiency.

[0041] In one possible implementation, when a user clicks the shipping address input box, the system reads all historical records under the "address_city" field from local storage, including "Beijing" (weight 23.5), "Shanghai" (weight 18.2), "Guangzhou" (weight 15.8), and "Shenzhen" (weight 6.3). After sorting by weight from highest to lowest, the system selects the top 5 to generate a recommendation list, displaying "Beijing," "Shanghai," "Guangzhou," and "Shenzhen" as options below the input box for the user to choose from. If the weight difference exceeds 50% (e.g., "Beijing" with a weight of 23.5 is much higher than the others), a dynamic threshold mechanism is used to display only the top 3.

[0042] Step S204: Render and display the recommendation list.

[0043] Specifically, rendering refers to converting the data structure of the recommendation list into graphical elements visible to the user interface, including creating dropdown containers, filling in option content, and setting styles. Display refers to presenting the recommendation list as a floating layer near the input component, allowing users to intuitively see the available items and click to select them.

[0044] The display position of the recommendation list is determined by dynamic positioning calculations. A dropdown container containing the recommendations is rendered below the input component, and user click events are listened for. When the user selects an item, its value is populated into the input component, triggering a weight update. This solution improves user efficiency and experience through immediate visual feedback and user-friendly interaction design.

[0045] In one possible implementation, when the shipping address input field gains focus, the system uses the `getBoundingClientRect` method to obtain the input field's position information. Combining this with the page scroll offset, it calculates the absolute positioning coordinates of the recommendation list. A white background with a shadow is rendered 5 pixels below the input field, displaying options such as "Beijing," "Shanghai," and "Guangzhou" sorted by weight. Each option is displayed as a div with `padding: 8px`, and its background color changes when the mouse hovers over it. When the user clicks "Beijing," the system fills the input field with that value, triggers a weight update for that value (increasing the original weight by 1), and simultaneously closes the recommendation list.

[0046] The web form input recommendation method provided in this embodiment establishes a storage record in the browser's local storage, using field identifiers as keys, containing the user's historical input values ​​and their corresponding weight values. This saves user data locally in the browser, avoiding the privacy risks associated with uploading to a cloud server. Simultaneously, the isolation of storage by field identifiers solves the problem of recommendation value confusion between different fields, laying the foundation for accurate recommendations. In response to user input on the input component, the method obtains the current input value, updates the weight value corresponding to the current input value according to a preset decay factor and time factor, and saves the updated weight value to the browser's local storage. By dynamically adjusting weights through a time decay factor, the recommended values ​​reflect both long-term usage frequency and recent usage behavior, achieving intelligent sorting of the recommendation list and improving the accuracy and timeliness of recommendations. Based on the weight values ​​corresponding to each historical input value under the current field in the browser's local storage, at least one historical input value is selected to generate the recommendation list. The most frequently used historical values ​​most relevant to the current input scenario are selected based on weight sorting, ensuring that the recommended content aligns with user habits and effectively reducing input time. The recommendation list is rendered and displayed, instantly presenting recommended options near the input component, providing a convenient interactive entry point, further optimizing the user experience and improving form filling efficiency. This improves the efficiency and privacy security of form input recommendations.

[0047] In some optional implementations, step S202 above, which updates the weight value corresponding to the current input value according to a preset attenuation factor and time factor, includes the following steps: Step a1: Obtain the current weight value and last usage time of the current input value.

[0048] Specifically, the current weight value refers to the current weight score of the historical input value recorded in local storage, reflecting a comprehensive score of its historical usage frequency and timeliness. For example, the value of the "count" field in the stored record is 15.32. The last usage time refers to the timestamp of the user's most recent input of the value, usually in milliseconds. For example, the value of the "lastUsed" field in the stored record is 1698765432100.

[0049] Retrieves the stored record corresponding to the current input value for the current field from the browser's local storage, retrieving the saved weight value and the last used timestamp. This forms the data foundation for weight updates, ensuring that subsequent calculations are based on accurate historical information.

[0050] Step a2: Calculate the time interval between the current time and the last time it was used.

[0051] Specifically, the system obtains the current timestamp, calculates the difference between it and the last used timestamp, and converts this difference into a time interval in days. Typically, the difference in milliseconds is divided by 86,400,000 (the number of milliseconds in a day) and rounded down to obtain the integer number of days. This time interval is used to measure how old the current input value is and is a key parameter in time decay calculations.

[0052] Step a3: Update the current weight value according to the decay factor and time interval to obtain the new weight value.

[0053] Specifically, the new weight values ​​are calculated by applying the following spatiotemporal weighting algorithm formula.

[0054] Wnew =Wcur* +1, Where Wnew is the new weight, Wcur is the current weight value, s is the decay factor, and t is the time interval. The exponentiation of the decay factor s to the power of t reflects the time decay effect, causing the historical weight to decrease exponentially with the number of days between intervals. The increment operation adds a fixed weight to the current usage behavior, ensuring that the recommendation priority of this value is increased with each use.

[0055] This implementation achieves dynamic updates to the weights of user-input values ​​through three sub-steps: obtaining historical weights and timestamps, calculating time intervals, and applying a decay formula. This mechanism allows the weights to reflect both the cumulative effect of long-term usage frequency and the timeliness of recent usage behavior. Values ​​that have not been used for a long time gradually have their weights decayed, while values ​​that have been frequently used recently have their weights continuously increased, thus achieving intelligent dynamic sorting of the recommendation list.

[0056] In one possible implementation, the user enters "Beijing" in the delivery address input box. The system retrieves this value from local storage; the last time it was used was 90 days ago, and the current weight is 8.5. The current time is September 12, 2025, and the calculation time interval is 90 days. With a preset decay factor of 0.95, the new weight is calculated as: 8.5 × 0.95^90 + 1. Since 0.95^90 ≈ 0.0099, the calculation result is approximately 8.5 × 0.0099 + 1 ≈ 1.08. This value, due to long-term inactivity, has significantly decreased from 8.5 to 1.08, indicating that the system has lowered its recommendation priority. The "+1" added in this usage preserves the basic weight for subsequent recommendations.

[0057] In some alternative implementations, the time interval is calculated in days, and the attenuation factor is between 0.8 and 0.99.

[0058] In some optional implementations, step S201 above includes: The current domain name is used as the first-level namespace, and the field identifier is used as the second-level namespace, so that the storage records of different domain names and different fields are stored in isolation.

[0059] Specifically, a first-level namespace refers to a top-level storage key name established based on the current website domain name. It is used to distinguish data from different websites, such as the "www.example.com" part in "formAssist_www.example.com", ensuring that data from website A is not mixed with data from website B. A second-level namespace refers to a secondary storage key name established based on field identifiers within the first-level namespace. It is used to distinguish data from different form fields within the same website, such as "address_city" and "user_email", ensuring that data from the shipping address field is not confused with data from the phone number field.

[0060] This implementation achieves fine-grained partitioning and storage of user data through a dual namespace design of domain name isolation and field isolation. Domain name isolation avoids cross-site data pollution, ensuring that a user's shipping address on shopping website A will not appear in the recommendation list on shopping website B. Field isolation solves the inherent problem of browser autofill failing to distinguish similar fields; for example, "work phone number" and "home phone number," although semantically similar, are stored in different second-level namespaces, preventing confusion during recommendations. This solution provides a data foundation for accurate recommendations.

[0061] In one possible implementation, when a user enters "Beijing" in the shipping address input box on shopping website A (www.shopA.com), the system uses "formAssist_www.shopA.com" as the first-level namespace key and "address_city" as the second-level namespace key, storing the record as {"Beijing": {"count":15.32, "lastUsed":1698765432100}}. The phone number input box on the registration page of the same website is stored independently using "user_phone" as the second-level namespace. When the user visits shopping website B (www.shopB.com), the system uses "formAssist_www.shopB.com" as the first-level namespace, completely isolating the data from website A and preventing data commingling.

[0062] In some optional implementations, step S203 above, which involves selecting at least one historical input value to generate a recommendation list, includes the following steps: Step b1: Read all historical input values ​​and their corresponding weight values ​​for the current field from the browser's local storage.

[0063] Specifically, based on the field identifier of the current form field, all storage records corresponding to that field are read from the browser's local storage. First, the first-level namespace key name generated by the current domain is obtained, and then combined with the current field identifier as the second-level namespace key name. The complete data object stored under that field is then read from localStorage. This data object contains all historical values ​​that the user has entered in this field, as well as the weight value and last used timestamp for each historical value.

[0064] Step b2: Sort the historical input values ​​in descending order of weight value.

[0065] Specifically, all historical input values ​​and their weights are compiled into a key-value pair set. Using the weight as the sorting key, the historical input values ​​are rearranged in descending order (from largest to smallest). The sorting algorithm can use JavaScript's native `Array.sort` method to ensure that the historical input value with the highest weight is placed at the beginning of the list.

[0066] Step b3: Select the top-ranked historical input values ​​as the recommendation list.

[0067] Specifically, the top N values ​​from the sorted list of historical input values ​​are selected as the recommendation list. The default value for N is 5, which displays the top 5 historical input values ​​with the highest weights. A dynamic threshold mechanism can be used to adjust the actual number of values ​​displayed: if the weight difference between the highest weight and other values ​​exceeds 50%, only the top 3 are displayed; if the weights of the values ​​are close (difference less than 10%), the top 5 are displayed, or the values ​​are sorted by most recent usage time.

[0068] This implementation method achieves a weighted intelligent recommendation list generation mechanism through three sub-steps: reading, sorting, and selecting. This scheme ensures that frequently used and recently active input values ​​are displayed first, avoiding the limitations of traditional schemes that only sort in reverse chronological order. This makes the recommendation results more aligned with users' actual usage habits, thereby effectively improving form completion efficiency.

[0069] In one possible implementation, when a user clicks the shipping address input box, the system reads all historical records under the "address_city" field from local storage, including "Beijing" (weight 23.5), "Shanghai" (weight 18.2), "Guangzhou" (weight 15.8), "Shenzhen" (weight 6.3), "Chengdu" (weight 5.1), and "Wuhan" (weight 4.2). The system sorts these in descending order of weight to obtain the above order. Based on the default N=5 setting, the first 5 are selected to generate a recommendation list, displaying "Beijing," "Shanghai," "Guangzhou," "Shenzhen," and "Chengdu" below the input box. If the weight of "Beijing" (23.5) is significantly higher than the second-ranked "Shanghai" (18.2) (a difference of approximately 29%, not exceeding 50%), all 5 are still displayed; if the weight of "Beijing" is significantly higher than other values ​​(e.g., the weight difference exceeds 50%), only the first 3 are displayed according to a dynamic threshold mechanism.

[0070] Figure 3 This is a schematic diagram of a process for determining a recommendation list according to an embodiment of this application. For example... Figure 3 As shown, firstly, in response to the input field gaining focus (onFocus), the system reads the local storage data corresponding to the current field identifier (fieldKey). Then, it checks if historical data exists for that field. If the data does not exist, an empty array is returned directly, and the recommendation list is not displayed. If the data exists, all stored historical input values ​​for that field are iterated through, and the current weight of each value is recalculated using the weight calculation formula (current weight = stored value.count × decay factor^(current time - last used time) / 86400000). After calculation, all historical input values ​​are sorted in descending order of their current weight values. Finally, the top N items (default N=5) are extracted from the sorted list and returned as the recommendation list for front-end rendering and display.

[0071] In some optional implementations, the user input operation on the input component in step 202 above includes the following steps: Step c1: In response to the input box gaining focus, generate and display the recommendation list.

[0072] Specifically, the focus event refers to the browser event (onFocus) triggered when a user clicks on an input box or switches to an input box using the Tab key on the keyboard, indicating that the input box is now in an input-enabled state.

[0073] When the input box gains focus, the generation and display process of the recommendation list is immediately triggered. After the system detects the onFocus event, it calls the recommendation generation module to read the historical data of the current field from local storage, generates a recommendation list after sorting by weight, and renders and displays it below the input box through dynamic positioning calculation. This solution ensures that users can see the recommended options immediately when they are ready to input, without any additional operations.

[0074] Step c2, in response to the change event triggered by the content of the input box, perform anti-shake delay processing on the current input value and update the recommendation list.

[0075] Specifically, the change event refers to the browser event (onChange or onInput) triggered when the content of the input box changes, such as when the user types characters, pastes content, or deletes characters. Anti-shake delay processing means that by setting a timer, multiple continuously triggered events are merged into one processing, and subsequent operations are only executed after the user stops inputting for a specified time (such as 300 milliseconds), avoiding performance waste caused by high-frequency events.

[0076] When the content of the input box changes, perform anti-shake delay processing on the current input value. After the delay time ends, update the recommendation list according to the latest input value. For example, when the user quickly enters "North", even if multiple change events are triggered during the anti-shake delay, the recommendation will not be updated immediately; after the user stops inputting for 300 milliseconds, the system filters the recommendation list based on "North" as the prefix and only displays the historical input values starting with "North" (such as "Beijing", "Chaoyang District, Beijing"), achieving dynamic screening of the recommended content.

[0077] This embodiment optimizes the generation and update strategies of the recommendation list by distinguishing the focus event and the change event and introducing an anti-shake delay mechanism. The focus event triggers the initial recommendation, allowing users to see the high-frequency options immediately; the change event combines anti-shake to achieve dynamic screening, avoiding performance loss caused by frequent updates, and ensuring the balance between interactive fluency and system response efficiency.

[0078] In a possible implementation, the user clicks the mouse (gains focus) on the delivery address input box, and the system immediately displays the recommended list sorted by weight: "Beijing", "Shanghai", "Guangzhou". The user starts typing "North", and each character input triggers a change event, but after 300 milliseconds of anti-shake delay processing, the system updates the recommendation list based on "North" and only displays the options starting with "North" such as "Beijing", "Chaoyang District, Beijing", "Haidian District, Beijing", etc., to help users quickly locate the target address.

[0079] Figure 4 It is a schematic flowchart of another input recommendation method for web forms according to an embodiment of the present application. As Figure 4As shown, when a user enters information in the form, the onBlur or onChange event triggers the capture of the field identifier and the current input value; the system performs a spatiotemporal weighted calculation to update the weights and saves the updated data to local storage. When a form element is focused, the onFocus event triggers the generation of a Top N recommendation list; the front end renders a floating recommendation list for the user to select from; after the user clicks on a recommendation item, the system automatically fills in the form and triggers the weight update again, forming a closed loop.

[0080] This embodiment also provides an input recommendation device for web forms, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0081] This embodiment provides an input recommendation device for web forms, such as... Figure 5 As shown, it includes: Module 501 is used to create a storage record in the browser's local storage, using the field identifier as the key name, containing the user's historical input values ​​and their corresponding weight values. The update module 502 is used to respond to the user's input operation on the input component, obtain the current input value, update the weight value corresponding to the current input value according to the preset decay factor and time factor, and save the updated weight value to the browser's local storage. The generation module 503 is used to select at least one historical input value to generate a recommendation list based on the weight values ​​corresponding to each historical input value under the current field in the browser's local storage. The display module 504 is used to render and display the recommendation list.

[0082] In some alternative implementations, the update module 502 includes: The acquisition unit is used to acquire the current weight value and last usage time of the current input value; The time interval calculation unit is used to calculate the time interval between the current time and the last time used. The weight update unit is used to update the current weight value according to the decay factor and time interval to obtain the new weight value.

[0083] In some alternative implementations, the time interval is calculated in days, and the attenuation factor is between 0.8 and 0.99.

[0084] In some alternative implementations, the establishment module 501 includes: The storage unit is used to isolate and store records of different domains and different fields by using the current domain name as the first-level namespace and the field identifier as the second-level namespace.

[0085] In some alternative implementations, the generation module 503 includes: The reading unit is used to read all historical input values ​​and their corresponding weight values ​​from the browser's local storage for the current field. The sorting unit is used to sort historical input values ​​in descending order of weight value; The recommendation list determination unit is used to select multiple historical input values ​​that were ranked first as the recommendation list.

[0086] In some alternative implementations, the update module 502 includes: The generation unit is used to generate and display a recommendation list in response to the input field gaining focus. Update list cells to respond to changes triggered by input field content, perform debouncing delay processing on the current input value, and update the recommendation list.

[0087] The web form input recommendation device provided in this application can execute the web form input recommendation method provided in any embodiment of this application, and has the corresponding functional modules and beneficial effects of the method execution. Further functional descriptions of the above modules and units are the same as those in the corresponding embodiments described above, and will not be repeated here.

[0088] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0089] The following is a detailed reference. Figure 6 This diagram illustrates a suitable structural schematic for implementing the electronic device described in the embodiments of this application. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 601, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 602 or a program loaded from memory 608 into random access memory (RAM) 603. The RAM 603 also stores various programs and data required for the operation of the electronic device. The processor 601, ROM 602, and RAM 603 are interconnected via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0090] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0091] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 609, or installed from a memory 608, or installed from a ROM 602. When the computer program is executed by the processor 601, it performs the functions defined in the web form input recommendation method of embodiments of this application.

[0092] Figure 6 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0093] This application also provides a computer-readable storage medium. The methods described in this application can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the web form input recommendation method shown in the above embodiments is implemented.

[0094] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0095] Although embodiments of this application have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of this application, and all such modifications and variations fall within the scope defined by the appended claims.

Claims

1. A method for input recommendation in web forms, characterized in that, The method includes: In the browser's local storage, a storage record containing the user's historical input values ​​and the corresponding weight values ​​of the user's historical input values ​​is created, using the field identifier as the key. In response to the user's input operation on the input component, the current input value is obtained, the weight value corresponding to the current input value is updated according to the preset decay factor and time factor, and the updated weight value is saved to the browser's local storage; Based on the weight values ​​corresponding to each historical input value under the current field in the browser's local storage, at least one historical input value is selected to generate a recommendation list; Render and display the recommended list.

2. The method according to claim 1, characterized in that, The step of updating the weight value corresponding to the current input value according to the preset decay factor and time factor includes: Obtain the current weight value and last usage time of the current input value; Calculate the time interval between the current time and the last used time; The current weight value is updated based on the decay factor and the time interval to obtain a new weight value.

3. The method according to claim 2, characterized in that, The time interval is calculated in days, and the attenuation factor is between 0.8 and 0.

99.

4. The method according to claim 1, characterized in that, The step of establishing a storage record in the browser's local storage, using the field identifier as the key, that contains the user's historical input values ​​and their corresponding weight values, includes: The current domain name is used as the first-level namespace, and the field identifier is used as the second-level namespace, so that the storage records of different domain names and different fields are stored in isolation.

5. The method according to claim 1, characterized in that, The step of selecting at least one historical input value to generate a recommendation list includes: Read all historical input values ​​for the current field and the weight values ​​corresponding to those historical input values ​​from the browser's local storage; The historical input values ​​are sorted in descending order of their weight values. Select the top-ranked historical input values ​​as the recommendation list.

6. The method according to claim 1, characterized in that, The user's input operations on the input component include: In response to the input field gaining focus, the recommendation list is generated and displayed. In response to a change event triggered by the content of the input box, the current input value is debounced and delayed, and the recommendation list is updated.

7. An input recommendation device for web forms, characterized in that, The device includes: The module is used to create storage records in the browser's local storage, using field identifiers as keys, containing the user's historical input values ​​and their corresponding weight values. The update module is used to respond to the user's input operation on the input component, obtain the current input value, update the weight value corresponding to the current input value according to the preset decay factor and time factor, and save the updated weight value to the browser's local storage. The generation module is used to select at least one historical input value to generate a recommendation list based on the weight values ​​corresponding to each historical input value under the current field in the browser's local storage. The display module is used to render and display the recommendation list.

8. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory storing computer instructions, and the processor executing the computer instructions to perform the input recommendation method for web forms as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to perform the input recommendation method for web forms according to any one of claims 1 to 6.

10. A computer program product, characterized in that, Includes computer instructions for causing a computer to perform the input recommendation method for web forms according to any one of claims 1 to 6.

Images