Method and device for realizing Chinese input search optimization
By setting a method of clearing icons and listening to combined input events in the input box component, the problem of frequently triggering searches and inaccurate search results during Chinese input search is solved, achieving more efficient and accurate searches and improving user experience.
Patent Information
- Application Number
- CN202411465435.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-21
- Publication Date
- 2025-02-11
AI Technical Summary
The prior art has problems such as frequent triggering of searches, inaccurate search results, performance problems, poor user experience, and inability to process input candidate words during the Chinese input search process.
By setting the input box component, receiving the user's text input, and adding a clear icon to the right side of the input box, triggering the onChange event to notify the parent component of the current input box status changes. At the same time, listen for compositionstart, compositionupdate and compositionend events, track the combination input stage by maintaining the inputCompositionStatus status variable, and trigger the onChange event at the end of the combination input, and call the parent component's CallbackSearch function to execute the search logic.
Effectively distinguish the pinyin input process and final text confirmation, avoid invalid query of intermediate states, improve the accuracy and efficiency of search, significantly improve user experience, and is suitable for other locale environments that use combination input methods.
Smart Images
Figure CN119414971A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of data processing technology, and in particular to a method, device and electronic device for realizing Chinese input search optimization. Background Art
[0002] Search is an information retrieval technology that allows users to find and obtain relevant information by providing keywords, phrases, or other forms of queries. Search functions are widely used on the Internet, databases, file systems, and various applications to help users quickly find the information or resources they need.
[0003] The existing technology has the following problems in the process of implementing Chinese input search:
[0004] 1. Frequently triggered search: For the Pinyin input method, each letter entered will trigger the onChange event, resulting in unnecessary frequent search requests.
[0005] 2. Inaccurate search results: During the Chinese input process, the pinyin letter combination cannot accurately express the user's search intent, but the search has been triggered and may return irrelevant results.
[0006] 3. Performance issues: Frequent search requests will increase server load and reduce application performance.
[0007] 4. Poor user experience: Refreshing search results during input will interfere with user input and provide a poor experience.
[0008] 5. Unable to process input method candidate words: Unnecessary searches may be triggered when selecting candidate words for the Pinyin input method.
[0009] The above problems become technical problems that need to be solved. Summary of the invention
[0010] In view of this, an embodiment of the present invention provides a method, device and electronic device for implementing Chinese input search optimization, which at least partially solves the problems existing in the prior art.
[0011] In a first aspect, an embodiment of the present invention provides a method for implementing Chinese input search optimization, comprising:
[0012] An input box component is set, the input box component receives text input from a user and serves as a front-end interface for a search function, and the input box component is embedded in a user interface;
[0013] The allowClear property is set for the input box component. When the user clicks the clear icon on the right side of the input box, the input content is cleared with one click, and the onChange event is triggered to notify the parent component of the change in the current input box state.
[0014] The input box component obtains the current actual input scenario, and generates a custom placeholder text based on the actual input scenario. The custom placeholder text is displayed in the input box as prompt information when the input box is empty, providing guidance to the user on what type of content should be entered;
[0015] The input box component listens to compositionstart, compositionupdate and compositionend events, and tracks whether the current state is in the composition input stage by maintaining a state variable named inputCompositionStatus;
[0016] When the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic.
[0017] According to a specific implementation of an embodiment of the present invention, the setting input box component includes:
[0018] Obtaining system information of the operating system where the input box is located, and determining the corresponding UI framework according to the system information;
[0019] Using HTML <input> The element is used as the basic building block, and a new component file is created in the selected framework to implement the search input box using the form control component provided by the framework;
[0020] Add a clear button to the right of the input box. When the user clicks the clear button, the click event is listened for and the DOM element is directly operated to immediately clear the current input content.
[0021] According to a specific implementation of an embodiment of the present invention, the setting input box component further includes:
[0022] Define the handleSearch function, which is responsible for receiving the query parameters submitted by the user and sending them to the server to perform the search;
[0023] Use AJAX network request method to pass data to the backend API and display the returned results.
[0024] According to a specific implementation of an embodiment of the present invention, setting the allowClear attribute for the input box component includes:
[0025] Use position:relative to position the input box, and position:absolute to position the icon to the right of the input box.
[0026] Immediately after clearing the text in the input box, the onChange event is triggered and the current empty string value is passed to the parent component so that the parent component can respond to the state change of the input box.
[0027] According to a specific implementation of an embodiment of the present invention, the input box component obtains the current actual input scene, and generates a custom placeholder text based on the actual input scene, including:
[0028] Identify and document all relevant input scenarios and, for each scenario, determine its specific requirements;
[0029] Design a suitable placeholder text template for each known input scenario;
[0030] When the input box component is initialized, the corresponding placeholder is selected from the preset placeholder text template according to the current scenario as the placeholder of the input box;
[0031] When a scene change is detected, the input box's placeholder text is immediately updated to match the new scene.
[0032] According to a specific implementation of an embodiment of the present invention, the input box component monitors compositionstart, compositionupdate, and compositionend events, and tracks whether the current state is in the composition input stage by maintaining a state variable named inputCompositionStatus, including:
[0033] Define a state variable named inputCompositionStatus in the input box component. The inputCompositionStatus variable is used to track whether it is currently in the composition input stage;
[0034] On component initialization, set inputCompositionStatus to false.
[0035] According to a specific implementation of an embodiment of the present invention, the input box component monitors compositionstart, compositionupdate and compositionend events, and tracks whether the current state is in the composition input stage by maintaining a state variable named inputCompositionStatus, and further includes:
[0036] When the compositionstart event is triggered, update inputCompositionStatus to true, indicating that the user has started using the input method editor for composition input;
[0037] When the compositionupdate event is triggered, the content change of the input box is not processed immediately, and inputCompositionStatus continues to be true until the composition input is completed;
[0038] When the compositionend event is triggered, update inputCompositionStatus to false, indicating that the composition input has been completed.
[0039] According to a specific implementation of an embodiment of the present invention, when the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic, including:
[0040] When the input box component is initialized, a state variable currentInputValue is set to store the current content of the input box;
[0041] Add an event listener to the input box to listen for compositionstart, compositionupdate, and compositionend events;
[0042] If the input content is found to have changed during the compositionend event processing, the onChange event is triggered;
[0043] In the onChange event handler, check if inputCompositionStatus is false to ensure that the search logic is executed after the combination input is completed;
[0044] Calls the CallbackSearch function provided by the parent component and passes the latest search string to the parent component.
[0045] In a second aspect, an embodiment of the present invention provides a device for implementing Chinese input search optimization, including:
[0046] A setting module is used to set an input box component, which receives text input from a user and serves as a front-end interface for a search function. The input box component is embedded in a user interface;
[0047] The clearing module sets the allowClear property for the input box component. When the user clicks the clear icon on the right side of the input box, the input content is cleared with one click, and the onChange event is triggered to notify the parent component of the change in the current input box state.
[0048] A generation module, wherein the input box component obtains the current actual input scenario and generates a custom placeholder text based on the actual input scenario. The custom placeholder text is displayed in the input box as prompt information when the input box is empty, providing guidance to the user on what type of content should be entered;
[0049] A monitoring module monitors compositionstart, compositionupdate and compositionend events through the input box component, and tracks whether the current input is in the composition input stage by maintaining a state variable named inputCompositionStatus;
[0050] Transfer module, when the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic.
[0051] In a third aspect, an embodiment of the present invention further provides an electronic device, the electronic device comprising:
[0052] at least one processor; and,
[0053] a memory communicatively connected to the at least one processor; wherein,
[0054] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the implementation method of Chinese input search optimization in any of the first aspects or any implementation methods of the first aspect.
[0055] In a fourth aspect, an embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the implementation method of Chinese input search optimization in the aforementioned first aspect or any implementation method of the first aspect.
[0056] In the fifth aspect, an embodiment of the present invention further provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer executes the implementation method of Chinese input search optimization in the aforementioned first aspect or any implementation method of the first aspect.
[0057] The implementation scheme of Chinese input search optimization in the embodiment of the present invention includes: setting an input box component, the input box component receives the user's text input, serves as the front-end interface of the search function, and the input box component is embedded in the user interface; setting the allowClear attribute for the input box component, when the user clicks the clear icon located on the right side of the input box, the function of clearing the input content with one click is activated, and at the same time, the onChange event is triggered to notify the parent component of the change of the current input box state; the input box component obtains the current actual input scene, and generates a custom placeholder text based on the actual input scene, the custom placeholder text is displayed in the input box as prompt information when the input box is empty, and provides the user with guidance on what type of content should be entered; the input box component monitors compositionstart, compositionupdate and compositionend events, and tracks whether it is currently in the composition input stage by maintaining a state variable named inputCompositionStatus; when the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic. The solution of the present application is different from the traditional simple onChange event monitoring. Instead, it is based on the precise state of the input method composition event to judge the user's input intention and control the search timing. This method can effectively distinguish the pinyin input process and the final text confirmation, so that the search is triggered only when the user completes the real Chinese input, avoiding invalid queries in the intermediate state. This optimization not only improves the accuracy and efficiency of the search, but also significantly improves the user experience. It is also applicable to other language environments that use combined input methods, reflecting the wide adaptability to multilingual scenarios. BRIEF DESCRIPTION OF THE DRAWINGS
[0058] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for use in the embodiments 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.
[0059] Figure 1 A flowchart of a method for implementing Chinese input search optimization provided by an embodiment of the present invention;
[0060] Figure 2 A schematic flow chart of another method for implementing Chinese input search optimization provided by an embodiment of the present invention;
[0061] Figure 3 A schematic diagram of the structure of a device for implementing Chinese input search optimization provided by an embodiment of the present invention;
[0062] Figure 4 A schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION
[0063] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.
[0064] The following describes the embodiments of the present disclosure through specific examples, and those skilled in the art can easily understand other advantages and effects of the present disclosure from the contents disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all of the embodiments. The present disclosure can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present disclosure. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present disclosure.
[0065] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein may be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present disclosure, it should be understood by those skilled in the art that an aspect described herein may be implemented independently of any other aspect, and two or more of these aspects may be combined in various ways. For example, any number of aspects described herein may be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein may be used to implement this device and / or practice this method.
[0066] It should also be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present disclosure. The drawings only show components related to the present disclosure rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.
[0067] Additionally, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects described may be practiced without these specific details.
[0068] The embodiment of the present disclosure provides a method for implementing Chinese input search optimization. The method for implementing Chinese input search optimization provided in this embodiment can be executed by a computing device, which can be implemented as software, or as a combination of software and hardware, and the computing device can be integrated in a server, terminal device, etc.
[0069] See also Figure 1 and Figure 2 The embodiment of the present disclosure provides a method for implementing Chinese input search optimization, including:
[0070] S101, setting an input box component, the input box component receives text input from a user, serves as a front-end interface for a search function, and the input box component is embedded in a user interface.
[0071] You can determine the specific requirements of the search function, such as whether you need an auto-complete function, history, etc. You can decide the appearance style (such as color, border), size, and position layout of the input box on the page. Then you can design the user interaction process, such as how to respond after clicking or pressing the Enter key.
[0072] Choose a suitable UI framework or library based on the existing technology stack of the project. Common modern front-end frameworks include React, Vue, Angular, etc. If you are using a specific design system (such as AntDesign, Material-UI), you should consider the ready-made components provided in the system to simplify the development process.
[0073] Create a new component file in the selected framework specifically for implementing the search input box. Using HTML <input> Elements as basic building blocks, or take advantage of form control components provided by the framework / library. Set appropriate properties and style class names to match the visual effects determined during the design phase.
[0074] The input box sets the placeholder attribute to provide users with a brief and clear operation guide, such as "Please enter keywords..." The placeholder content can be dynamically adjusted according to different application scenarios to make it more in line with the actual needs of users.
[0075] Add an icon or a small button to the right of the input box, which can immediately clear the current input content when the user clicks it. Implementing this function usually involves listening to click events and calling corresponding methods to update the state or directly operate DOM elements.
[0076] Place a small icon representing the search operation on the left side of the input box as a visual guide. This icon can be implemented through CSS background images or SVG, and make sure it is consistent with the overall design style.
[0077] Define a function (such as handleSearch) that receives the query parameters submitted by the user and sends them to the server to perform the search. Use AJAX or other network request methods to pass data to the backend API and display the returned results.
[0078] By following the above steps, you can create a search input box component, which can effectively improve the functionality and user satisfaction of your website or application.
[0079] S102, setting the allowClear attribute for the input box component. When the user clicks the clear icon located on the right side of the input box, the input content is cleared with one click, and an onChange event is triggered to notify the parent component of the change in the current input box state.
[0080] Add a function in the input box component that allows users to clear the input content with one click. Make sure that when the user clicks the clear icon, not only the input box content is cleared, but also the onChange event is triggered to notify the parent component of the state change.
[0081] You can design or choose an appropriate icon as a clear button. This icon is usually a small "X" or trash can symbol, placed to the right of the input box. Reserve space for the clear icon in the design of the input box. Use position:relative; to position the input box, and position:absolute; to position the icon to the right end of the input box.
[0082] Plan the interaction logic after the user clicks the clear icon. First, the text in the input box should be cleared immediately. Second, the onChange event is triggered to pass the current value (which should be an empty string at this time) to the parent component so that the parent component can respond to the state change of the input box.
[0083] The confirmation input box component maintains the current input value state internally. This is usually done through the state management mechanism in front-end frameworks such as React. When the user clicks the clear icon, the state is updated to an empty string.
[0084] Add a click event listener for the clear icon. When the user clicks the icon, the preset action is performed, that is, the input box is cleared and the onChange event is triggered. The onChange event should carry the latest input value (empty string) so that the parent component can make corresponding changes based on the new value, such as resetting search results or prompt information.
[0085] Through the above steps, you can add a practical one-click clear function to the input box component to improve the user experience.
[0086] S103, the input box component obtains the current actual input scenario, and generates a custom placeholder text based on the actual input scenario. The custom placeholder text is displayed as prompt information in the input box when it is empty, providing guidance to the user on what type of content should be entered.
[0087] Determine which specific input scenarios require customized placeholder text. For example, different pages and functional modules may require different prompts. Identify and record all relevant input scenarios. This may include but is not limited to searching for products, searching for articles, finding users, etc. For each scenario, determine its specific needs and user expectations. For example, in a product search, users may want to see "Please enter the product name or number."
[0088] Design a suitable placeholder text template for each known input scenario. Make sure the text is concise and clear, and can guide users to provide correct input. Considering internationalization support, if the application is for multilingual users, you also need to prepare placeholder texts in multiple languages.
[0089] When the input box component is initialized, or when switching to a new input scene, the current specific scene is determined. According to the current scene, a suitable one is selected from the preset placeholder text templates as the placeholder of the input box.
[0090] If there are multiple different input scenarios in your app, and the user can switch between them (for example, through a navigation menu), you need to listen for scene change events. When a scene change is detected, immediately update the placeholder text of the input box to match the requirements of the new scene.
[0091] Through the above steps, you can create a flexible and responsive input box component, which can automatically generate corresponding placeholder text according to the actual input scenario, so as to better guide users to complete the operation. Such a design not only improves the friendliness of the interface, but also enhances the user's sense of participation and satisfaction.
[0092] S104, monitoring compositionstart, compositionupdate and compositionend events through the input box component, and tracking whether the current stage is the composition input stage by maintaining a state variable named inputCompositionStatus.
[0093] Set up combined input events, including:
[0094] compositionstart: Fired when the user starts composition input using an input method editor (IME). For example, starting to input pinyin in a Chinese IME.
[0095] compositionupdate: triggered when the user updates the input content during the composition input process. For example, the user continues to enter pinyin or select candidate words.
[0096] compositionend: Triggered when the user completes the composition input. At this point, the input method editor inserts the finalized characters into the input box.
[0097] Define a state variable named inputCompositionStatus in the input box component. This variable is used to track whether the current input is in the composition input stage. It can be set to a Boolean type, for example, true means the input is being composed, and false means it is not being composed.
[0098] When the component is initialized, inputCompositionStatus is set to false because there is no composition input in progress in the initial state. When the compositionstart event is triggered, update inputCompositionStatus to true, indicating that the user has started to use the input method editor for composition input. This state can be used to prevent other processing of the input box content during this period, such as instant search or verification, until the composition input is completed.
[0099] When the compositionupdate event is triggered, the content change of the input box is not processed immediately. This is because at this stage, the user may still be selecting a suitable candidate word or continuing to input. Continue to keep inputCompositionStatus true until the composition input is completed.
[0100] When the compositionend event is triggered, update inputCompositionStatus to false, indicating that the composition input has been completed. In this event handler, you can safely read and process the final input content. For example, trigger a search operation or send the content to a parent component.
[0101] During the entire composition input process, the state of inputCompositionStatus is continuously updated and accurately reflects the current input state at any time. If multiple places need to access inputCompositionStatus, ensure the consistency and synchronization of the state.
[0102] During composition input, avoid frequently triggering unnecessary UI updates or network requests to reduce interruptions and improve performance. Provide visual feedback after the composition input is completed, such as highlighting the input content or briefly displaying a confirmation message.
[0103] Through the above steps, the combined input process in the input box component can be effectively managed, and the user's input content can be processed at the right time. This not only improves the response speed of the application, but also improves the overall user experience.
[0104] S105, when the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic.
[0105] When the input box component is initialized, set a state variable to store the current content of the input box, such as currentInputValue. Add an event listener to the input box to listen for compositionstart, compositionupdate, and compositionend events.
[0106] When the compositionstart event is triggered, record the value of the current input box to currentInputValue and set inputCompositionStatus to true, indicating that composition input has started.
[0107] In the compositionupdate event, you usually don't need to perform any specific actions, because the user may still be selecting candidate words or continuing to input. Just keep inputCompositionStatus true.
[0108] When the compositionend event is triggered, first get the latest value of the input box. Compare the latest input value with currentInputValue. If the two are different, it means that the input content has changed. Update currentInputValue to the latest input value. Set inputCompositionStatus to false, indicating that the composition input has ended.
[0109] If the input content is found to have changed during the compositionend event processing, the onChange event is manually triggered. The onChange event should carry the latest input value as a parameter so that the parent component can receive this update.
[0110] In the onChange event handler, check if inputCompositionStatus is false to ensure that the search logic is executed after the composition input is completed. Call the CallbackSearch function provided by the parent component and pass it the latest search string.
[0111] The CallbackSearch function in the parent component should receive this search string and execute the corresponding search logic as needed, such as initiating a network request to obtain search results.
[0112] Throughout the process, the status of currentInputValue and inputCompositionStatus is accurate and updated in a timely manner. During the composition input, frequent triggering of unnecessary UI updates or network requests is avoided to reduce interference and improve performance.
[0113] The above steps ensure that the input box component can correctly handle the combined input and trigger the search logic after the combined input is completed, thereby providing a smooth and efficient user experience.
[0114] The present invention applies an innovative Chinese input search optimization method, the core of which is to realize an intelligent search trigger mechanism through accurate identification of input status. This method is different from the traditional simple onChange event monitoring, but is based on the precise state of input method composition events to judge the user's input intention and control the search timing. This method can effectively distinguish the pinyin input process and the final text confirmation, so that the search is triggered only when the user completes the real Chinese input, avoiding invalid queries in the intermediate state. This optimization not only improves the accuracy and efficiency of the search, but also significantly improves the user experience. It is also applicable to other language environments using combined input methods, reflecting the wide adaptability to multi-language scenarios.
[0115] See also Figure 2 The main technical solution of the present invention includes the following steps:
[0116] 1) Provide an input box component for users to enter search content.
[0117] 2) Implement the clearing function of the input box (allowClear attribute).
[0118] 3) Set the placeholder text of the input box and display different prompts according to different types.
[0119] 4) Add a search icon as a prefix to the input box.
[0120] 5) Implement input method combination input processing: listen for compositionstart, compositionupdate, and compositionend events. Use inputCompositionStatus to record the current input status.
[0121] 6) Implement the processing of input content changes: listen to the onChange event. Trigger the search callback only when the input method combination input ends.
[0122] 7) Call the CallbackSearch function provided by the parent component and pass the input content to the parent component for search.
[0123] 8) Use ref to get the input box DOM element to facilitate focus management and other operations.
[0124] 9) Support internationalization, use the formatMessage function to get placeholder text in different languages.
[0125] The specific implementation of the present invention includes:
[0126] Component structure:
[0127] •Use large-size input box components and support one-click clearing function.
[0128] •Dynamic hint text and integrated search icon as a visual guide.
[0129] State Management:
[0130] •Use React hooks to create input combination state tracking mechanism.
[0131] • Accurately record the start, update, and end states of the input method.
[0132] Event handling mechanism:
[0133] •Specialized logic to handle various events during the input method combination process.
[0134] • Separate methods are responsible for handling common input changes, ensuring flexible response.
[0135] Input processing flow:
[0136] •Adopt differentiated processing strategies for direct input and input method input.
[0137] •Intelligently determine when input is complete to avoid triggering the search operation too early.
[0138] Search trigger mechanism:
[0139] •Strictly control the search trigger timing to ensure input integrity.
[0140] •The actual search operation is performed through the callback function passed by the attribute, which enhances flexibility.
[0141] Performance optimization:
[0142] •Adopt input completion judgment mechanism to effectively reduce unnecessary search requests.
[0143] •Optimize search trigger frequency to significantly improve system response speed and user experience.
[0144] Internationalization support:
[0145] •Integrated multi-language support mechanism to dynamically adjust prompt text.
[0146] •The component design takes into account the input characteristics of different languages and provides a consistent user experience.
[0147] Scalability design:
[0148] •The component structure is loosely coupled, making it easy to reuse and integrate in different application scenarios.
[0149] •Reserve function expansion interface to lay the foundation for adding auto-completion, search history and other functions in the future.
[0150] According to a specific implementation of an embodiment of the present invention, the setting input box component includes:
[0151] Obtaining system information of the operating system where the input box is located, and determining the corresponding UI framework according to the system information;
[0152] Using HTML <input> The element is used as the basic building block, and a new component file is created in the selected framework to implement the search input box using the form control component provided by the framework;
[0153] Add a clear button to the right of the input box. When the user clicks the clear button, the click event is listened for and the DOM element is directly operated to immediately clear the current input content.
[0154] According to a specific implementation of an embodiment of the present invention, the setting input box component further includes:
[0155] Define the handleSearch function, which is responsible for receiving the query parameters submitted by the user and sending them to the server to perform the search;
[0156] Use AJAX network request method to pass data to the backend API and display the returned results.
[0157] According to a specific implementation of an embodiment of the present invention, setting the allowClear attribute for the input box component includes:
[0158] Use position:relative to position the input box, and position:absolute to position the icon to the right of the input box.
[0159] Immediately after clearing the text in the input box, the onChange event is triggered and the current empty string value is passed to the parent component so that the parent component can respond to the state change of the input box.
[0160] According to a specific implementation of an embodiment of the present invention, the input box component obtains the current actual input scene, and generates a custom placeholder text based on the actual input scene, including:
[0161] Identify and document all relevant input scenarios and, for each scenario, determine its specific requirements;
[0162] Design a suitable placeholder text template for each known input scenario;
[0163] When the input box component is initialized, the corresponding placeholder is selected from the preset placeholder text template according to the current scenario as the placeholder of the input box;
[0164] When a scene change is detected, the input box's placeholder text is immediately updated to match the new scene.
[0165] According to a specific implementation of an embodiment of the present invention, the input box component monitors compositionstart, compositionupdate, and compositionend events, and tracks whether the current state is in the composition input stage by maintaining a state variable named inputCompositionStatus, including:
[0166] Define a state variable named inputCompositionStatus in the input box component. The inputCompositionStatus variable is used to track whether it is currently in the composition input stage;
[0167] On component initialization, set inputCompositionStatus to false.
[0168] According to a specific implementation of an embodiment of the present invention, the input box component monitors compositionstart, compositionupdate and compositionend events, and tracks whether the current state is in the composition input stage by maintaining a state variable named inputCompositionStatus, and further includes:
[0169] When the compositionstart event is triggered, update inputCompositionStatus to true, indicating that the user has started using the input method editor for composition input;
[0170] When the compositionupdate event is triggered, the content change of the input box is not processed immediately, and inputCompositionStatus continues to be true until the composition input is completed;
[0171] When the compositionend event is triggered, update inputCompositionStatus to false, indicating that the composition input has been completed.
[0172] According to a specific implementation of an embodiment of the present invention, when the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic, including:
[0173] When the input box component is initialized, a state variable currentInputValue is set to store the current content of the input box;
[0174] Add an event listener to the input box to listen for compositionstart, compositionupdate, and compositionend events;
[0175] If the input content is found to have changed during the compositionend event processing, the onChange event is triggered;
[0176] In the onChange event handler, check if inputCompositionStatus is false to ensure that the search logic is executed after the combination input is completed;
[0177] Calls the CallbackSearch function provided by the parent component and passes the latest search string to the parent component.
[0178] Corresponding to the above method embodiment, see Figure 3 The embodiment of the present invention further discloses a Chinese input search optimization implementation device 30, comprising:
[0179] Setting module 301, setting an input box component, the input box component receives the text input of the user, serves as the front-end interface of the search function, and the input box component is embedded in the user interface;
[0180] The clearing module 302 sets the allowClear property for the input box component. When the user clicks the clear icon on the right side of the input box, the input content is cleared with one click, and an onChange event is triggered to notify the parent component of the change in the current input box state.
[0181] Generating module 303, the input box component obtains the current actual input scenario, and generates a custom placeholder text based on the actual input scenario. The custom placeholder text is displayed in the input box as prompt information when the input box is empty, providing guidance to the user on what type of content should be entered;
[0182] The monitoring module 304 monitors the compositionstart, compositionupdate and compositionend events through the input box component, and tracks whether the current stage is the composition input stage by maintaining a state variable named inputCompositionStatus;
[0183] The transfer module 305 triggers the onChange event when the compositionend event occurs and the input content changes, and calls the CallbackSearch function provided by the parent component to pass the latest search string to the parent component to execute the search logic.
[0184] See also Figure 4 The embodiment of the present invention further provides an electronic device 60, the electronic device comprising:
[0185] at least one processor; and,
[0186] a memory communicatively connected to the at least one processor; wherein,
[0187] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the implementation method of Chinese input search optimization in the aforementioned method embodiment.
[0188] An embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the aforementioned method embodiment.
[0189] An embodiment of the present invention also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium. The computer program includes program instructions, which, when executed by a computer, enable the computer to execute the implementation method of Chinese input search optimization in the aforementioned method embodiment.
[0190] Reference below Figure 4 , which shows a schematic diagram of the structure of an electronic device 60 suitable for implementing the embodiment of the present disclosure. The electronic device in the embodiment of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle terminals (such as vehicle navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.
[0191] like Figure 4 As shown, the electronic device 60 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the electronic device 60 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.
[0192] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, a gage, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 4 The electronic device 60 is shown with various devices, but it should be understood that it is not required to implement or have all the devices shown. More or fewer devices may be implemented or have instead.
[0193] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.
[0194] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims
1. A method for implementing Chinese input search optimization, characterized in that: include: An input box component is set, the input box component receives text input from a user and serves as a front-end interface for a search function, and the input box component is embedded in a user interface; The allowClear property is set for the input box component. When the user clicks the clear icon on the right side of the input box, the input content is cleared with one click, and the onChange event is triggered to notify the parent component of the change in the current input box state. The input box component obtains the current actual input scenario, and generates a custom placeholder text based on the actual input scenario. The custom placeholder text is displayed in the input box as prompt information when the input box is empty, providing guidance to the user on what type of content should be entered; The input box component listens to compositionstart, compositionupdate and compositionend events, and tracks whether the current state is in the composition input stage by maintaining a state variable named inputCompositionStatus; When the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic.
2. The method according to claim 1, characterized in that The setting input box component includes: Obtaining system information of the operating system where the input box is located, and determining the corresponding UI framework according to the system information; Using HTML <input> The element is used as the basic building block, and a new component file is created in the selected framework to implement the search input box using the form control component provided by the framework; Add a clear button to the right of the input box. When the user clicks the clear button, the click event is listened for and the DOM element is directly operated to immediately clear the current input content.
3. The method according to claim 2, characterized in that The setting input box component also includes: Define the handleSearch function, which is responsible for receiving the query parameters submitted by the user and sending them to the server to perform the search; Use AJAX network request method to pass data to the backend API and display the returned results.
4. The method according to claim 3, characterized in that The setting of the allowClear attribute for the input box component includes: Use position:relative to position the input box, and position:absolute to position the icon to the right of the input box. Immediately after clearing the text in the input box, the onChange event is triggered and the current empty string value is passed to the parent component so that the parent component can respond to the state change of the input box.
5. The method according to claim 4, characterized in that The input box component obtains the current actual input scenario and generates a custom placeholder text based on the actual input scenario, including: Identify and document all relevant input scenarios and, for each scenario, determine its specific requirements; Design a suitable placeholder text template for each known input scenario; When the input box component is initialized, the corresponding placeholder is selected from the preset placeholder text template according to the current scenario as the placeholder of the input box; When a scene change is detected, the input box's placeholder text is immediately updated to match the new scene.
6. The method according to claim 5, characterized in that The input box component monitors compositionstart, compositionupdate and compositionend events, and tracks whether the current input is in the composition input stage by maintaining a state variable named inputCompositionStatus, including: Define a state variable named inputCompositionStatus in the input box component. The inputCompositionStatus variable is used to track whether it is currently in the composition input stage; On component initialization, set inputCompositionStatus to false.
7. The method according to claim 6, characterized in that The input box component monitors compositionstart, compositionupdate and compositionend events, and tracks whether the current state is in the composition input stage by maintaining a state variable named inputCompositionStatus, and further includes: When the compositionstart event is triggered, update inputCompositionStatus to true, indicating that the user has started using the input method editor for composition input; When the compositionupdate event is triggered, the content change of the input box is not processed immediately, and inputCompositionStatus continues to be true until the composition input is completed; When the compositionend event is triggered, update inputCompositionStatus to false, indicating that the composition input has been completed.
8. The method according to claim 7, characterized in that When the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic, including: When the input box component is initialized, a state variable currentInputValue is set to store the current content of the input box; Add an event listener to the input box to listen for compositionstart, compositionupdate, and compositionend events; If the input content is found to have changed during the compositionend event processing, the onChange event is triggered; In the onChange event handler, check if inputCompositionStatus is false to ensure that the search logic is executed after the combination input is completed; Calls the CallbackSearch function provided by the parent component and passes the latest search string to the parent component.
9. A device for implementing Chinese input search optimization, characterized in that: include: A setting module is used to set an input box component, which receives text input from a user and serves as a front-end interface for a search function. The input box component is embedded in a user interface; The clearing module sets the allowClear property for the input box component. When the user clicks the clear icon on the right side of the input box, the input content is cleared with one click, and the onChange event is triggered to notify the parent component of the change in the current input box state. A generation module, wherein the input box component obtains the current actual input scenario and generates a custom placeholder text based on the actual input scenario. The custom placeholder text is displayed in the input box as prompt information when the input box is empty, providing guidance to the user on what type of content should be entered; A monitoring module monitors compositionstart, compositionupdate and compositionend events through the input box component, and tracks whether the current input is in the composition input stage by maintaining a state variable named inputCompositionStatus; Transfer module, when the compositionend event occurs and the input content changes, the onChange event is triggered, and the CallbackSearch function provided by the parent component is called to pass the latest search string to the parent component to execute the search logic.
10. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for implementing Chinese input search optimization as described in any one of claims 1 to 8.