Method and system for realizing Web front-end car return search
By monitoring the global keyboard press events and using the anti-shake logic, the Enter key triggers the search operation, solving the problem of cumbersome multi-condition search operations and improving the user experience.
Patent Information
- Application Number
- CN202411870191.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-18
- Publication Date
- 2025-04-22
AI Technical Summary
In the PC system, the search operation of multiple search conditions on pages is cumbersome, affecting the user experience.
By listening to the global keyboard press events, using Angular's HostListener and anti-shake logic, the Enter key triggers the search operation, simplifying the page search operation.
This simplifies page search operations and improves user experience, allowing users to conduct multi-condition searches without clicking the search button.
Smart Images
Figure CN119861991A_ABST
Abstract
Description
Technical Field
[0001] The invention relates to the technical field of Web front-end, in particular to a method and system for realizing carriage return search on a Web front-end. Background Art
[0002] In the PC system, many pages have multiple search conditions. After entering or selecting the search conditions on the keyboard, it is cumbersome to click the search button with the mouse to request the interface to update the data.
[0003] How to simplify page search operations and improve user experience is a technical problem that needs to be solved. Summary of the invention
[0004] The technical task of the present invention is to address the above shortcomings and provide a method and system for implementing a web front-end enter search to solve the technical problem of how to simplify page search operations and improve user experience.
[0005] In a first aspect, the present invention provides a method for implementing a web front-end enter search, comprising the following steps:
[0006] Listen to global keyboard press events: Listen to global keyboard press events through Angular's HostListener. HostListener is a property decorator used to add event listeners to host elements.
[0007] Create an event processing function: create a function for processing keyboard press events as the event processing function, and call the event processing function when the keyboard press event is triggered;
[0008] Page control matching: control the route to match the current page, and respond to keyboard press events when the route is the current page;
[0009] Add anti-shake logic: Add anti-shake logic in the event processing function. Based on the anti-shake logic, when a high-frequency keyboard press event is triggered, the time processing function is only executed once within the scheduled time. If the high-frequency keyboard press event is triggered again within the scheduled time, the time is recalculated.
[0010] Preferably, when monitoring global keyboard press events through Angular's HostListener, select the HostListener decorator in the component class, specify the event name as document:keydown, which means monitoring keyboard press events of the entire document, and pass the event object $event as a parameter to the event processing function.
[0011] Preferably, the event processing function is represented as handleKeyboardEvent, and the event processing function receives a parameter downEvent of KeyboardEvent type. Inside the event processing function, it is checked whether the pressed key is the Enter key, and downEvent.key is compared with the string Enter. If it is the Enter key, the query method getList() is called.
[0012] Preferably, when the control route matches the current page, this.router.url is used in the event handling function to obtain the URL of the current route, and check whether the URL of the current route matches the URL of the specific page. If so, subsequent operations are performed.
[0013] Preferably, when adding anti-shake logic in the event processing function, define a variable debounceTimer in the component class to save the timer. In the event processing function, if debounceTimer already exists, use clearTimeout to clear the previous timer, set a new timer this.debounceTimer, and execute the getList() method after a preset time delay. If the keyboard press event is triggered again within the preset time, the previous timer is cleared and the preset time delay is recalculated.
[0014] In a second aspect, the present invention provides a system for implementing a Web front-end carriage return search, which is used to implement a Web front-end carriage return search by using a method for implementing a Web front-end carriage return search as described in any one of the first aspects, wherein the system includes an event monitoring module, an event processing function creation module, a page control matching module, and an anti-shake module;
[0015] The event listening module is used to perform the following: listen to global keyboard press events through Angular's HostListener, which is a property decorator used to add event listening to the host element;
[0016] The event processing function creation module is used to perform the following: create a function for processing a keyboard press event as an event processing function, and call the event processing function when the keyboard press event is triggered;
[0017] The page control matching module is used to perform the following: control the route to match the current page, and respond to keyboard press events when the route is the current page;
[0018] The anti-shake module is used to perform the following: add anti-shake logic in the event processing function. Based on the anti-shake logic, when a high-frequency keyboard press event is triggered, the time processing function is only executed once within the scheduled time. If the high-frequency keyboard press event is triggered again within the scheduled time, the time is recalculated.
[0019] Preferably, when monitoring global keyboard press events through Angular's HostListener, the event monitoring module is used to perform the following: select the HostListener decorator in the component class, specify the event name as document:keydown, which means monitoring keyboard press events of the entire document, and pass the event object $event as a parameter to the event processing function.
[0020] Preferably, the event processing function is represented as handleKeyboardEvent, and the event processing function receives a parameter downEvent of KeyboardEvent type. Inside the event processing function, it is checked whether the pressed key is the Enter key, and downEvent.key is compared with the string Enter. If it is the Enter key, the query method getList() is called.
[0021] Preferably, when the control route matches the current page, the page control matching module is used to perform the following: use this.router.url in the event processing function to obtain the URL of the current route, check whether the URL of the current route matches the URL of the specific page, and if so, perform subsequent operations.
[0022] Preferably, when adding anti-shake logic in the event processing function, the anti-shake module is used to perform the following: define a variable debounceTimer in the component class to save the timer. In the event processing function, if debounceTimer already exists, use clearTimeout to clear the previous timer, set a new timer this.debounceTimer, and execute the getList() method after a predetermined delay. If the keyboard press event is triggered again within the predetermined time, the previous timer is cleared and the delay of the predetermined time is recalculated.
[0023] The implementation method and system of the Web front-end enter search of the present invention have the following advantages: on the basis of the existing click button search or single search condition search, the enter key multiple search condition search is added, which can optimize the page search operation and improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0024] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.
[0025] The present invention is further described below in conjunction with the accompanying drawings.
[0026] Figure 1 This is a flowchart of a method for implementing a web front-end enter search in Example 1. DETAILED DESCRIPTION
[0027] The present invention is further described below in conjunction with the accompanying drawings and specific embodiments so that those skilled in the art can better understand the present invention and implement it. However, the embodiments are not intended to limit the present invention. In the absence of conflict, the embodiments of the present invention and the technical features in the embodiments may be combined with each other.
[0028] The embodiment of the present invention provides a method and system for implementing a web front-end enter search, which is used to solve the technical problem of how to simplify page search operations and improve user experience.
[0029] Embodiment 1:
[0030] The invention discloses a method for realizing a web front-end enter search, comprising four steps of monitoring a global keyboard pressing event, creating an event processing function, page control matching, and adding anti-shake logic.
[0031] Step S100 monitors global keyboard press events: monitors global keyboard press events through Angular's HostListener, which is a property decorator used to add event monitoring to the host element.
[0032] In step S100 of this embodiment, when monitoring global keyboard press events through Angular's HostListener, the HostListener decorator is selected in the component class, and the event name is specified as document:keydown, which means monitoring keyboard press events of the entire document, and passing the event object $event as a parameter to the event processing function.
[0033] Step S200 creates an event processing function: creates a function for processing a keyboard press event as an event processing function, and calls the event processing function when a keyboard press event is triggered.
[0034] The event processing function of step S200 of this embodiment is represented as handleKeyboardEvent. The event processing function receives a parameter downEvent of the KeyboardEvent type. Inside the event processing function, it is checked whether the pressed key is the Enter key, and downEvent.key is compared with the string Enter. If it is the Enter key, the query method getList() is called.
[0035] As a specific implementation of step S200, create an event processing function, handleKeyboardEvent, which will be called when a keyboard is pressed, and perform event processing after receiving parameters.
[0036] handleKeyboardEvent(downEvent:KeyboardEvent){
[0037] if(downEvent.key===='Enter'){
[0038] this.getList()
[0039] }
[0040] }
[0041] downEvent is an instance of KeyboardEvent, and downEvent can access relevant information of the event. Use downEvent.key === 'Enter' to determine whether it is the Enter key, and the same applies to other keys. The known query method is getList(). Determine whether the Enter key is currently pressed and call the query method.
[0042] Step S300 Page control matching: Control the route to match the current page, and respond to keyboard press events when the route is the current page.
[0043] When the control route matches the current page in step S300 of this embodiment, this.router.url is used in the event processing function to obtain the URL of the current route, and it is checked whether the URL of the current route matches the URL of the specific page. If it matches, subsequent operations are performed.
[0044] During the implementation of the method of this embodiment, when switching to another page, the information of the previous page will still be requested. The control can be performed by judging whether the route is the current page. When the route is the current page, the query method is called again.
[0045] handleKeyboardEvent(downEvent:KeyboardEvent){
[0046] if(this.router.url==' / project / a'){
[0047] if(downEvent.key===='Enter'){
[0048] this.getList();
[0049] }
[0050] }
[0051] }.
[0052] Step S400 adds anti-shake logic: add anti-shake logic in the event processing function. Based on the anti-shake logic, when a high-frequency keyboard pressing event is triggered, the time processing function is only executed once within the predetermined time. If the high-frequency keyboard pressing event is triggered again within the predetermined time, the time is recalculated.
[0053] When adding anti-shake logic to the event processing function in step S400 of this embodiment, a variable debounceTimer is defined in the component class to save the timer. In the event processing function, if debounceTimer already exists, clearTimeout is used to clear the previous timer, and a new timer this.debounceTimer is set. The getList() method is executed after a predetermined time delay. If the keyboard press event is triggered again within the predetermined time, the previous timer is cleared and the predetermined time delay is recalculated.
[0054] In order to prevent the performance problem caused by high-frequency pressing of the Enter key to trigger the search event, this embodiment adds an anti-shake function in the handleKeyboardEvent function. After the high-frequency event is triggered, the function will only be executed once within n seconds. If the high-frequency event is triggered again within n seconds, the time is recalculated.
[0055] The complete code is as follows:
[0056] debounceTimer:any; / / define a variable to save the timer
[0057] / / Listen for global keyboard press events
[0058] @HostListener('document:keydown',['$event'])
[0059] handleKeyboardEvent(downEvent:KeyboardEvent){
[0060] if(this.router.url==' / project-manage / cooperationAgreementList'){
[0061] if(downEvent.key===='Enter'){
[0062] if(this.debounceTimer){
[0063] clearTimeout(this.debounceTimer); / / Clear the previous timer
[0064] }
[0065] this.debounceTimer=setTimeout(()=>{
[0066] this.getList(); / / Set a new timer to trigger the search operation
[0067] },300); / / Set the delay time of anti-shake to 300 milliseconds
[0068] }
[0069] }
[0070] }
[0071] The method of this embodiment uses angular's HostListener to listen to the host element and call the event processing function to implement the keyboard key operation query method, controls the influence between system pages through angular routing, and avoids the impact of high-frequency events on system performance through anti-shake logic.
[0072] In some search engines, the search box is an input box where users fill in search criteria. When the input box is focused, they can search by pressing the Enter key. When the search box loses focus, pressing the Enter key will not work. This is achieved by binding the keyup event to the input box. Only one criterion can be searched at a time.
[0073] The management system page will have multiple search conditions, so this method is not suitable. We handle multi-condition query events by listening to global keyboard press events.
[0074] The method of this embodiment implements the enter key search by adding a global monitoring keyboard event, and the user no longer needs to click the query button with the mouse to search, thereby simplifying the page search operation and improving the user experience.
[0075] Embodiment 2:
[0076] The invention discloses a system for realizing a Web front-end carriage return search, comprising an event monitoring module, an event processing function creation module, a page control matching module and an anti-shake module.
[0077] The event listening module is used to perform the following: listen to global keyboard press events through Angular's HostListener. HostListener is a property decorator used to add event listening to the host element.
[0078] In this embodiment, when the global keyboard press event is monitored through Angular's HostListener, the event monitoring module is used to perform the following: the HostListener decorator is selected in the component class, and the event name is specified as document:keydown, which means monitoring the keyboard press event of the entire document, and the event object $event is passed as a parameter to the event processing function.
[0079] The event processing function creation module is used to perform the following: create a function for processing a keyboard press event as an event processing function, and call the event processing function when the keyboard press event is triggered.
[0080] In this embodiment, the event processing function is represented by handleKeyboardEvent, which receives a parameter downEvent of the KeyboardEvent type. Inside the event processing function, it is checked whether the pressed key is the Enter key, and downEvent.key is compared with the string Enter. If it is the Enter key, the query method getList() is called.
[0081] The page control matching module is used to perform the following: control the route to match the current page, and respond to keyboard press events when the route is the current page.
[0082] In this embodiment, when the control route matches the current page, the page control matching module is used to perform the following: use this.router.url in the event processing function to obtain the URL of the current route, check whether the URL of the current route matches the URL of the specific page, and if so, perform subsequent operations.
[0083] The anti-shake module is used to perform the following: add anti-shake logic in the event processing function. Based on the anti-shake logic, when a high-frequency keyboard press event is triggered, the time processing function is only executed once within the scheduled time. If the high-frequency keyboard press event is triggered again within the scheduled time, the time is recalculated.
[0084] In this embodiment, when anti-shake logic is added in the event processing function, the anti-shake module is used to perform the following: a variable debounceTimer is defined in the component class to save the timer. In the event processing function, if debounceTimer already exists, clearTimeout is used to clear the previous timer, and a new timer this.debounceTimer is set. The getList() method is executed after a predetermined delay. If the keyboard press event is triggered again within the predetermined time, the previous timer is cleared and the predetermined delay is recalculated.
[0085] The system of this embodiment can execute the method disclosed in Embodiment 1 to implement the web front-end enter search.
[0086] The implementation method and system of the Web front-end enter search provided by the present invention are introduced in detail above. Specific examples are used in this article to illustrate the principle and implementation mode of the present invention. The description of the above embodiments is only used to help understand the method and core idea of the present invention. At the same time, for those skilled in the art, according to the idea of the present invention, there will be changes in the specific implementation mode and application scope. In summary, the content of this specification should not be understood as limiting the present invention.
Claims
1. A method for implementing a web front-end enter search, characterized in that: The steps include: Listen to global keyboard press events: Listen to global keyboard press events through Angular's HostListener. HostListener is a property decorator used to add event listeners to host elements. Create an event processing function: create a function for processing keyboard press events as the event processing function, and call the event processing function when the keyboard press event is triggered; Page control matching: control the route to match the current page, and respond to keyboard press events when the route is the current page; Add anti-shake logic: Add anti-shake logic in the event processing function. Based on the anti-shake logic, when a high-frequency keyboard press event is triggered, the time processing function is only executed once within the scheduled time. If the high-frequency keyboard press event is triggered again within the scheduled time, the time is recalculated.
2. The method for implementing a web front-end enter search according to claim 1, characterized in that: When listening to global keyboard press events through Angular's HostListener, select the HostListener decorator in the component class and specify the event name as document:keydown, which means listening to keyboard press events of the entire document, and pass the event object $event as a parameter to the event processing function.
3. The method for implementing a web front-end enter search according to claim 1, characterized in that: The event processing function is represented as handleKeyboardEvent, and the event processing function receives a parameter downEvent of the KeyboardEvent type. Inside the event processing function, it is checked whether the pressed key is the Enter key, and downEvent.key is compared with the string Enter. If it is the Enter key, the query method getList() is called.
4. The method for implementing a web front-end enter search according to claim 1, characterized in that: When the control route matches the current page, use this.router.url in the event handling function to get the URL of the current route, check whether the URL of the current route matches the URL of the specific page, and if so, perform subsequent operations.
5. The method for implementing a web front-end enter search according to claim 3, characterized in that: When adding anti-shake logic in the event processing function, define a variable debounceTimer in the component class to save the timer. In the event processing function, if debounceTimer already exists, use clearTimeout to clear the previous timer, set a new timer this.debounceTimer, and execute the getList() method after a predetermined delay. If the keyboard press event is triggered again within the predetermined time, the previous timer is cleared and the predetermined delay is recalculated.
6. A system for implementing a web front-end enter search, characterized in that: Used to implement Web front-end enter search by a Web front-end enter search implementation method as described in any one of claims 1 to 5, the system includes an event monitoring module, an event processing function creation module, a page control matching module and an anti-shake module; The event listening module is used to perform the following: listen to global keyboard press events through Angular's HostListener, which is a property decorator used to add event listening to the host element; The event processing function creation module is used to perform the following: create a function for processing a keyboard press event as an event processing function, and call the event processing function when the keyboard press event is triggered; The page control matching module is used to perform the following: control the route to match the current page, and respond to keyboard press events when the route is the current page; The anti-shake module is used to perform the following: add anti-shake logic in the event processing function. Based on the anti-shake logic, when a high-frequency keyboard press event is triggered, the time processing function is only executed once within the scheduled time. If the high-frequency keyboard press event is triggered again within the scheduled time, the time is recalculated.
7. The implementation system of the Web front-end enter search according to claim 6 is characterized in that: When monitoring global keyboard press events through Angular's HostListener, the event monitoring module is used to perform the following: select the HostListener decorator in the component class, specify the event name as document:keydown, which means monitoring keyboard press events of the entire document, and pass the event object $event as a parameter to the event processing function.
8. The implementation system of the Web front-end enter search according to claim 6 is characterized in that: The event processing function is represented as handleKeyboardEvent, and the event processing function receives a parameter downEvent of the KeyboardEvent type. Inside the event processing function, it is checked whether the pressed key is the Enter key, and downEvent.key is compared with the string Enter. If it is the Enter key, the query method getList() is called.
9. The implementation system of the Web front-end enter search according to claim 6, characterized in that: When the control route matches the current page, the page control matching module is used to perform the following: use this.router.url in the event handling function to obtain the URL of the current route, check whether the URL of the current route matches the URL of the specific page, and if so, perform subsequent operations.
10. The implementation system of the Web front-end enter search according to claim 8, characterized in that: When adding anti-shake logic in the event processing function, the anti-shake module is used to perform the following: define a variable debounceTimer in the component class to save the timer. In the event processing function, if debounceTimer already exists, use clearTimeout to clear the previous timer, set a new timer this.debounceTimer, and execute the getList() method after a predetermined delay. If the keyboard press event is triggered again within the predetermined time, the previous timer is cleared and the delay of the predetermined time is recalculated.