Retrieval method and device based on search component, computer equipment and storage medium

Abstract

The invention relates to a retrieval method and device based on a search component, computer equipment and a storage medium, and relates to the technical field of computer front ends. The method comprises the following steps: displaying a search component for retrieval in a front-end page, wherein a drop-down box and an input box are displayed in the search component; the drop-down box is used for determining a target search condition from multiple pre-configured search conditions; the pull-down frame comprises a main class pull-down frame and a sub class pull-down frame corresponding to the main class pull-down frame; in response to a condition setting operation for the drop-down box and the input box, displaying at least one tag corresponding to the target search condition in the search component; the label is used for displaying a target search condition and a target search element corresponding to the target search condition; in response to an input operation aiming at the input box and a retrieval button of the input box, displaying a retrieval result corresponding to the input operation in a result display area of the search component; the retrieval result meets the target search condition. By adopting the method, the retrieval efficiency of the user can be improved.

Description

Technical Field

[0001] This application relates to the technical field of computer front - end, and particularly to a retrieval method, device, computer device, storage medium, and computer program product based on a search component. Background Art

[0002] Currently, the vast majority of front - end pages provide a retrieval function for users through a search box. When the search box on most pages conducts a retrieval based on search conditions, it will perform permutations and combinations on the search conditions composed of multiple search elements and display them on the page. If there are too many search conditions configured on the front - end page, the search box containing the search conditions will occupy most of the front - end page, affecting the page layout.

[0003] In related technologies, a shrink button can be configured for the search box to shrink the search conditions in the search box and reduce the proportion of the search box on the front - end page. However, before shrinking through the shrink button, the search box containing multiple search conditions has already occupied most of the area of the front - end page, and because the search box containing multiple search conditions is too large, it is not easy for users to find the search conditions they need and the shrink button, resulting in insufficient retrieval efficiency for users. Summary of the Invention

[0004] Based on this, in view of the above - mentioned technical problems, it is necessary to provide a retrieval method, device, computer device, computer - readable storage medium, and computer program product based on a search component that can improve the retrieval efficiency of users.

[0005] In a first aspect, this application provides a retrieval method based on a search component. The method includes:

[0006] Display a search component for retrieval on the front - end page. The search component displays a drop - down box and an input box; the drop - down box is used to determine a target search condition from multiple pre - configured search conditions; the drop - down box includes a main - category drop - down box and a sub - category drop - down box corresponding to the main - category drop - down box, and the search elements in the sub - category drop - down box change according to the search conditions of the main - category drop - down box;

[0007] In response to a condition - setting operation on the drop - down box and the input box, display at least one label corresponding to the target search condition within the search component; the label is used to display the target search condition and the target search elements corresponding to the target search condition;

[0008] In response to an input operation on the input box and the retrieval button of the input box, display a retrieval result corresponding to the input operation in the result display area of the search component; the retrieval result meets the target search condition.

[0009] In one embodiment, the search component includes a dropdown box and an input box; the condition setting operation includes a condition selection operation and an element configuration operation;

[0010] In response to the condition setting operation on the dropdown box and the input box, displaying at least one label corresponding to the target search condition within the search component, includes:

[0011] In response to the condition selection operation on the dropdown box, displaying the multiple pre-configured search conditions in the main category dropdown box corresponding to the dropdown box;

[0012] Determining the target search condition from the multiple pre-configured search conditions and displaying at least one label corresponding to the target search condition in the search component;

[0013] In response to the element configuration operation on the sub-category dropdown box and the input box, updating the label and displaying the updated label.

[0014] In one embodiment, the element configuration operation includes an element selection operation and an element input operation;

[0015] The determining the target search condition from the multiple pre-configured search conditions and displaying at least one label corresponding to the target search condition in the search component, includes:

[0016] In response to the condition selection operation on the main category dropdown box, determining the target search condition from the multiple pre-configured search conditions, and displaying the sub-category dropdown box corresponding to the target search condition;

[0017] In response to the element selection operation on the sub-category dropdown box, determining the target search element corresponding to the target search condition, or, in response to the element input operation on the input box, determining the target search element corresponding to the target search condition;

[0018] Determining and displaying at least one label including the target search condition and the target search element.

[0019] In one embodiment, the displaying the search result corresponding to the input operation in the result display area of the search component in response to the input operation on the input box and the search button of the input box, includes:

[0020] In response to the input operation on the input box, displaying the keyword corresponding to the input operation in the input box;

[0021] In response to an input operation on the retrieval button, retrieval results for the keyword that meet the search conditions corresponding to the label are displayed in the result display area of the search component.

[0022] In one embodiment, the response to the condition setting operations on the drop-down box and the input box, and displaying at least one label corresponding to the target search condition within the search component includes:

[0023] In response to a condition selection operation on the drop-down box, among the various pre-configured search conditions displayed in the main category drop-down box corresponding to the drop-down box, determine the self-identified search condition as the target search condition;

[0024] In response to an element input operation on the input box, identify the input element text to obtain an identification result, and update the self-identified search condition based on the identification result;

[0025] Determine and display the label corresponding to the element text and the updated self-identified search condition.

[0026] In one embodiment, a time selector is also displayed in the search component; the method further includes:

[0027] In response to a time selection operation on the time selector, display a time range label determined based on the time selection operation in the search component, and the time range label is used to limit the time range of the retrieval results.

[0028] In one embodiment, the method further includes:

[0029] Display at least one label generated during the previous retrieval on the front-end page; the time range between the retrieval time of the previous retrieval and the current time meets a preset cache duration;

[0030] In response to a click operation on the clear button in the search component, close at least one label generated during the previous retrieval.

[0031] In a second aspect, the present application also provides a retrieval device based on a search component. The device includes:

[0032] A search component display module, configured to display a search component for retrieval on the front-end page, and a drop-down box and an input box are displayed in the search component; the drop-down box is used to determine a target search condition from multiple pre-configured search conditions; the drop-down box includes a main category drop-down box and a sub-category drop-down box corresponding to the main category drop-down box, and the search elements in the sub-category drop-down box change with the search conditions of the main category drop-down box;

[0033] A label display module, configured to display at least one label corresponding to the target search condition in the search component in response to a condition setting operation for the drop-down box and the input box; the label is used to display the target search condition and the target search element corresponding to the target search condition.

[0034] A retrieval result display module, configured to display the retrieval result corresponding to the input operation in the result display area of the search component in response to an input operation for the input box and the retrieval button of the input box; the retrieval result satisfies the target search condition.

[0035] In a third aspect, the present application further provides a computer device. The computer device includes a memory and a processor. The memory stores a computer program, and when the processor executes the computer program, the steps of the above-mentioned retrieval method based on a search component are implemented.

[0036] In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned retrieval method based on a search component are implemented.

[0037] In a fifth aspect, the present application further provides a computer program product. The computer program product includes a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned retrieval method based on a search component are implemented.

[0038] The above retrieval method, device, computer device, storage medium, and computer program product based on a search component can display a search component for retrieval on a front-end page. The search component includes a dropdown box and an input box. The dropdown box is used to determine a target search condition from multiple pre-configured search conditions. The dropdown box includes a main category dropdown box and a sub-category dropdown box corresponding to the main category dropdown box. Moreover, the search elements in the sub-category dropdown box change according to the search condition of the main category dropdown box. In response to a condition setting operation for the dropdown box and the input box, at least one label corresponding to the target search condition is displayed within the search component. The label is used to display the target search condition and the target search elements corresponding to the target search condition. Subsequently, in response to an input operation for the input box and the retrieval button of the input box, the retrieval results that meet the target search condition corresponding to the input operation are displayed in the result display area of the search component. Through the above retrieval method based on a search component, the target search condition and target search elements can be determined in the search component through the dropdown box. Since the dropdown box is a multi-level structure composed of a main category dropdown box and a sub-category dropdown box, users can quickly find the required search conditions and search elements. The amount of content displayed in each level of the dropdown box is less than that of a form, and the determined target search condition can be displayed in the search component in the form of a label, avoiding occupying a large amount of the front-end page. In addition, the user terminal can retrieve the retrieval results based on the target search condition corresponding to at least one label and through the input box and the retrieval button, and can complete the retrieval of multiple search conditions while controlling the area of the search component to be small, thereby improving the user's retrieval efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] To more clearly illustrate the technical solutions in the embodiments of the present application or related technologies, the following will briefly introduce the drawings required for use in the description of the embodiments or related technologies. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0040] Figure 1 It is an application environment diagram of the retrieval method based on a search component in an embodiment;

[0041] Figure 2 It is a flowchart of the retrieval method based on a search component in an embodiment;

[0042] Figure 3 It is a flowchart of the step of displaying labels corresponding to the target search condition in an embodiment;

[0043] Figure 4 It is a schematic diagram of a search component in an embodiment;

[0044] Figure 5Schematic diagram of a search component in another embodiment;

[0045] Figure 6 Schematic diagram of a search component in another embodiment;

[0046] Figure 7 Structural block diagram of a retrieval device based on a search component in one embodiment;

[0047] Figure 8 Internal structure diagram of a computer device in one embodiment. Detailed implementation manners

[0048] In order to make the objectives, technical solutions and advantages of the present application clearer, the present application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0049] The retrieval method based on a search component provided by an embodiment of the present application can be applied to an application environment as Figure 1 shown. Among them, the terminal 102 communicates with the server 104 through a network. The data storage system can store the data that the server 104 needs to process. The data storage system can be integrated on the server 104, or can be placed in the cloud or on other network servers.

[0050] In some embodiments, the terminal 102 may receive a front-end page display instruction sent by a user and open the front-end page, and display a search component for retrieval in the front-end page. For example, a drop-down box, an input box, a retrieval button, labels, etc. may be displayed in the front-end page. The terminal 102 may determine a target search condition required by the user from a variety of pre-configured search conditions based on the drop-down box. For example, the terminal 102 may expand the drop-down box into multiple main category drop-down boxes, and expand one of the main category drop-down boxes to obtain multiple sub-category drop-down boxes included in the main category drop-down box, so as to determine the target search element corresponding to the sub-category drop-down box and the target search condition corresponding to the main category drop-down box. Different main category drop-down boxes may correspond to multiple different sub-category drop-down boxes. The terminal 102 may, in response to a condition setting operation on the drop-down box and the input box, determine a target search condition within the search component and display a label corresponding to the target search condition in the search component, so that the user can determine at any time whether the selected target search condition is correct. For example, the label may include the target search condition and the target search element, and the user can determine whether the target search condition and the target search element are correct based on the displayed label. The terminal 102 may, in response to an input operation on the input box and the retrieval button, enable the user to control the terminal 102 to send a retrieval request to the server 104 through the input operation, and obtain a retrieval result returned by the server 104 based on the label and the retrieval text in the input box, so that the terminal 102 displays the retrieval result corresponding to the input operation in the result display area. For example, the search conditions in the main category drop-down box and the search elements in the sub-category drop-down box displayed in the terminal 102 may both be returned by the server 104, or the search conditions in the main category drop-down box and the search elements in the sub-category drop-down box displayed in the terminal 102 may both be pre-configured by the terminal 104. No specific limitation is made in the embodiments of the present application.

[0051] Among them, the terminal 102 may be, but is not limited to, various personal computers, laptop computers, smart phones, tablet computers, Internet of Things devices, and portable wearable devices. The Internet of Things devices may be smart speakers, smart TVs, smart air conditioners, smart in-vehicle devices, etc. The portable wearable devices may be smart watches, smart bracelets, head-mounted devices, etc. The head-mounted device may be a virtual reality (VR) device, an augmented reality (AR) device, smart glasses, etc. The server 104 may be implemented by an independent server or a server cluster composed of multiple servers.

[0052] In an exemplary embodiment, as Figure 2 shown, a retrieval method based on a search component is provided, and this method is applied to Figure 1Taking the terminal 102 in [description context] as an example, the following steps S202 to S206 are included. Among them:

[0053] Step S202, display a search component for retrieval in the front-end page. A dropdown box and an input box are displayed in the search component; the dropdown box is used to determine a target search condition from multiple pre-configured search conditions; the dropdown box includes a main category dropdown box and a sub-category dropdown box corresponding to the main category dropdown box, and the search elements in the sub-category dropdown box change according to the search condition of the main category dropdown box.

[0054] Among them, the front-end page is the part that users directly interact with when using Internet products (such as websites, web applications, mobile applications, etc.). The front-end page can present data and functions to users in a visual and interactive manner. The search component is a component for retrieval among the multiple components included in the front-end page. The search component generally occupies a relatively small area in the front-end page. The search component can include a dropdown box and an input box. The dropdown box can be displayed as a rectangular box with a downward arrow. When the user clicks on the dropdown box, a list containing multiple options will pop up, and the user can select an option from the list. After selection, the dropdown box will display the content of the option selected by the user. For example, the user can click on the dropdown box to obtain multiple search conditions corresponding to the main category dropdown box, and each search condition corresponds to an option. For example, the user can click on the search condition corresponding to the main category dropdown box to obtain multiple search elements corresponding to the sub-category dropdown box, and each search element corresponds to an option. In some examples, due to the parent-child relationship between the main category dropdown box and the sub-category dropdown box, the search elements in the sub-category dropdown box change according to the search condition of the main category dropdown box.

[0055] Specifically, the terminal can open the front-end page according to the user's operation instruction and display multiple components in the front-end page. Among the multiple components, there is a search component for retrieval. Within the display range covered by the search component, there can be a dropdown box, an input box, and a retrieval button. In some examples, if the terminal receives an instruction sent by the user to click on the dropdown box, the dropdown box can expand, and the main category dropdown box will be displayed in the search component. The main category dropdown box can include multiple pre-configured search conditions, and each main category dropdown box can include a sub-category dropdown box corresponding to the main category dropdown box. If the terminal receives an instruction sent by the user to click on the sub-category dropdown box, the terminal can expand the sub-category dropdown box in the search component to display the sub-category dropdown box containing multiple search elements. Therefore, the main category dropdown box and the sub-category dropdown box are initially hidden in the dropdown box and need to be clicked by the user to display the search component, avoiding the search component occupying a large area.

[0056] Step S204, in response to a condition setting operation for the drop-down box and the input box, display at least one label corresponding to the target search condition within the search component; the label is used to display the target search condition and the target search element corresponding to the target search condition.

[0057] Among them, the condition setting operation is an operation instruction for initiation. The condition setting operation is used to determine the target search condition and the target search element corresponding to the target search condition. The search condition is a rule or restriction set to filter out information that meets its own requirements from a large amount of data. The search element is a limit value or limit range for the corresponding rule of a specific search condition. For example, the search condition can be age, and the search element can be from the first age to the second age. The label is displayed in the search component. When the user determines the target search condition and the target search component, for the convenience of the user's review, the determined target search condition and the target search component can be displayed in the front-end page in the form of a label.

[0058] In some examples, the terminal can respectively respond to the condition setting operation for the drop-down box and the condition setting operation for the input box, and display at least one label corresponding to the target search condition within the search component. After the terminal responds to the condition setting operation for the drop-down box, it can determine part of the target search condition. After the terminal responds to the condition setting operation for the input box, it can determine another part of the target search condition. Alternatively, the terminal can respond to the condition setting operation for the drop-down box and the condition setting operation for the input box, and comprehensively determine the target search condition.

[0059] In some examples, when the terminal determines the target search condition, it can display the target search condition and the target search element as a pair of data, and display them in the search component in the form of a label.

[0060] In some examples, the terminal can, through multiple condition setting operations, display multiple labels corresponding to multiple target search conditions within the search component. The number of labels that can be displayed in the search component can be customized by the terminal, and no specific limitation is made in the embodiments of the present application.

[0061] Step S206, in response to an input operation for the input box and the retrieval button of the input box, display the retrieval result corresponding to the input operation in the result display area of the search component; the retrieval result meets the target search condition.

[0062] Among them, the retrieval button is used to enable the terminal to send a retrieval request to the server, so that the terminal receives the retrieval result for the retrieval request returned by the server. The input operation is used to enable the terminal to obtain the retrieval text that the user wants to retrieve, and the terminal can generate a retrieval request based on the retrieval text.

[0063] Specifically, the terminal can respond to input operations on the input box and the search button of the input box. For example, based on the input operation, the terminal can display the search text entered by the user in the input box. Based on the input operation, the terminal can trigger the search button of the input box, so that the terminal generates a corresponding search request based on the search text and the target search conditions and target search elements included in the label, and sends the search request to the server. The server retrieves the search text based on the limitations of the target search conditions and target search elements, obtains the search results, and sends the search results to the terminal, so that the terminal receives the search results and displays them in the pre-configured result display area. In some examples, the result display area can be the free area of the search component, or the result display area can be a newly generated area of the search component. This is not specifically limited in the embodiments of the present application.

[0064] In the above retrieval method based on the search component, a search component for retrieval can be displayed on the front-end page, where the search component includes a drop-down box and an input box. The drop-down box is used to determine the target search condition from multiple pre-configured search conditions, and the drop-down box includes a main category drop-down box and a sub-category drop-down box corresponding to the main category drop-down box. Moreover, the search elements in the sub-category drop-down box change with the search conditions of the main category drop-down box. In response to the condition setting operation on the drop-down box and the input box, at least one label corresponding to the target search condition is displayed in the search component, and the label is used to display the target search condition and the target search element corresponding to the target search condition. Then, in response to the input operation on the input box and the search button of the input box, the search results that meet the target search condition corresponding to the input operation are displayed in the result display area of the search component. Through the above retrieval method based on the search component, the target search condition and target search element can be determined in the search component through the drop-down box. Since the drop-down box is a multi-level structure composed of a main category drop-down box and a sub-category drop-down box, the user can quickly find the required search conditions and search elements. The amount of content displayed in each level of the drop-down box is less than that of the form, and the determined target search condition can be displayed in the search component in the form of a label, avoiding occupying a large amount of the front-end page. In addition, the user terminal can retrieve the search results based on the target search conditions corresponding to at least one label and through the input box and the search button, and can complete the retrieval of multiple search conditions while controlling the area of the search component to be small, thereby improving the user's retrieval efficiency.

[0065] In an exemplary embodiment, the search component includes a drop-down box and an input box; the condition setting operation includes a condition selection operation and an element configuration operation, as Figure 3 shown, the specific implementation process of the step "In response to the condition setting operation on the drop-down box and the input box, at least one label corresponding to the target search condition is displayed in the search component" includes steps S302 to S306. Among them:

[0066] Step S302: In response to a conditional selection operation on the drop-down box, display multiple pre-configured search conditions in the main category drop-down box corresponding to the drop-down box.

[0067] Among them, the search component may include a drop-down box and an input box to reduce the area occupied by the search component. The conditional selection operation is used to determine a target search condition from multiple pre-configured search conditions, and the element configuration operation is used to determine a target search element from the sub-category drop-down box corresponding to the target search condition.

[0068] Specifically, the terminal can receive a user's conditional selection operation on the drop-down box. In response to the conditional selection operation on the drop-down box, the terminal can expand the drop-down box to obtain multiple expanded main category drop-down boxes and multiple pre-configured search conditions displayed in the multiple main category drop-down boxes. Each search condition corresponds to an expanded main category drop-down box.

[0069] Step S304: Determine a target search condition from multiple pre-configured search conditions and display at least one label corresponding to the target search condition in the search component.

[0070] Specifically, in response to a conditional selection operation on the main category drop-down box, the terminal can determine a target search condition from multiple pre-configured search conditions. At this time, the terminal has not yet determined the target search element corresponding to the target search condition. The terminal can create a label corresponding to the target search condition in the search component. In some examples, if multiple target search conditions are selected in the conditional selection operation on the main category drop-down box, the terminal can generate a label corresponding to each target search condition, so that the terminal displays the above-mentioned multiple labels in the search component.

[0071] Step S306: In response to an element configuration operation on the sub-category drop-down box and the input box, update the label and display the updated label.

[0072] Specifically, the terminal can, in response to an element configuration operation for the sub-category drop-down box, determine a target search element among the multiple search elements in the sub-category drop-down box and update the target search element to the label corresponding to the main category drop-down box to which the sub-category drop-down box belongs, so as to obtain an updated label. The terminal can display the updated label so that the label can include the target search condition and the target search element.

[0073] In this embodiment, by means of a drop-down box and an input box, and in response to a conditional selection operation on the drop-down box, a variety of pre-configured search conditions are displayed in the main category drop-down box corresponding to the drop-down box. The target search condition is determined from the variety of pre-configured search conditions, and at least one label corresponding to the target search condition is displayed in the search component. In response to an element configuration operation on the sub-category drop-down box and the input box, the label is updated, and the updated label is displayed, which can reduce the area finally occupied by the drop-down box, the input box and the label in the search component, improve the readability of the user, and improve the efficiency of the user to determine the target retrieval condition.

[0074] In an exemplary embodiment, the element configuration operation includes an element selection operation and an element input operation. The specific implementation process of the step "determine the target search condition from a variety of pre-configured search conditions and display at least one label corresponding to the target search condition in the search component" includes:

[0075] Step S402, in response to a conditional selection operation on the main category drop-down box, determine the target search condition from a variety of pre-configured search conditions, and display the sub-category drop-down box corresponding to the target search condition.

[0076] Among them, the element selection operation is used to select the target search element from the expanded sub-category drop-down box and the variety of search elements included in the sub-category drop-down box. The element input operation is used for the user to input the target search element into the input box and display the target search element.

[0077] Specifically, the terminal can, in response to a conditional selection operation on the main category drop-down box, expand the main category drop-down box to obtain multiple expanded main category drop-down boxes, and the terminal can determine the target search condition from the variety of pre-configured search conditions corresponding to the multiple main category drop-down boxes. The terminal can also, in response to a conditional selection operation on the unexpanded sub-category drop-down box corresponding to the main category drop-down box, expand the sub-category drop-down box and display the expanded sub-category drop-down box corresponding to the target search condition, and each expanded sub-category drop-down box can include multiple search elements.

[0078] Step S404, in response to an element selection operation on the sub-category drop-down box, determine the target search element corresponding to the target search condition, or, in response to an element input operation on the input box, determine the target search element corresponding to the target search condition.

[0079] Specifically, the terminal can, in response to an element selection operation on the sub-category drop-down box, determine at least one target search element in the expanded sub-category drop-down box. The terminal can, in response to an element input operation on the input box, determine the target search element input by the user for the target search condition.

[0080] Step S406: Determine and display at least one label containing the target search condition and the target search element.

[0081] Specifically, the terminal can store the determined target search condition and target search element into the label and display the label. In some examples, the terminal can determine the number of labels to be displayed according to the number of conditional selection operations, element selection operations, and element input operations.

[0082] In this embodiment, by responding to the element selection operation for the sub-category drop-down box and by responding to the element input operation for the input box, the target search element corresponding to the target search condition can be determined. The target search element corresponding to the target search condition can be determined in two implementation manners, thereby improving the generation accuracy of the determined label.

[0083] In an exemplary embodiment, the specific implementation process of the step "responding to the input operation for the input box and the retrieval button of the input box, and displaying the retrieval result corresponding to the input operation in the result display area of the search component" includes:

[0084] Responding to the input operation for the input box, display the keyword corresponding to the input operation in the input box; responding to the input operation for the retrieval button, display in the result display area of the search component the retrieval result for the keyword and satisfying the search condition corresponding to the label.

[0085] Among them, the input operation for the input box can be an operation for obtaining the retrieval text. The input operation for the retrieval button can be a click operation for triggering the retrieval.

[0086] In some embodiments, the terminal can generate the retrieval text in response to the input operation for the input box. In the embodiments of the present application, the retrieval text can be a keyword or a sentence. There is no specific limitation in the embodiments of the present application. In some embodiments, the retrieval text can be a keyword, and the terminal can display the keyword generated by the input operation in the input box.

[0087] In some embodiments, the terminal can generate a retrieval request based on the keyword and the target search condition and target search element included in each label in response to the input operation for the retrieval button, and send the retrieval request to the server. The server can retrieve in the database according to the retrieval request to obtain the retrieval result satisfying the target search condition corresponding to each label. The server can send the retrieval result to the terminal, and the terminal can display the retrieval result in the result display area.

[0088] In this embodiment, by responding to an input operation on the input box, keywords corresponding to the input operation are displayed in the input box, and by responding to an input operation on the search button, search results that meet the search conditions corresponding to the keywords and tags are displayed in the result display area of the search component, which can accurately display the keywords and search results, enabling the user to review whether the keywords and search results correspond after the search, thereby improving the user's review efficiency after the search.

[0089] In an exemplary embodiment, the specific implementation process of the step "responding to a condition setting operation on the drop-down box and the input box, and displaying at least one tag corresponding to the target search condition in the search component" includes:

[0090] Step S502, in response to a condition selection operation on the drop-down box, among the multiple pre-configured search conditions displayed in the main category drop-down box corresponding to the drop-down box, determine the self-identified search condition as the target search condition.

[0091] Among them, the self-identified search condition is one of the multiple pre-configured search conditions, and the self-identified search condition does not belong to a certain target search condition. The self-identified search condition is used to enable the terminal to identify the element text in the input box, obtain the identification result, and determine the target search condition actually corresponding to the element text according to the identification result. The element text can be the text corresponding to the target search element, and the element text is used to identify the target search condition corresponding to the text.

[0092] Specifically, the terminal can respond to the condition selection operation on the drop-down box, expand the main category drop-down box, and display multiple pre-configured search conditions. If the user's condition selection operation determines the self-identified search condition as the target condition, a tag corresponding to the self-identified search condition is generated and displayed in the search component.

[0093] Step S504, in response to an element input operation on the input box, identify the input element text, obtain the identification result, and update the self-identified search condition based on the identification result.

[0094] Specifically, the terminal can respond to the element input operation on the input box. At this time, the text displayed in the input box is the element text. The terminal can generate a search condition determination request based on the element text and send the search condition determination request to the server so that the server determines the target search condition to which the element text belongs. The server can return the target search condition to which the element text belongs. The terminal can use the target search condition to which the element text belongs to update the self-identified search condition, thereby obtaining the updated self-identified search condition. For example, the element text can be "male", and the server can determine that the target search condition corresponding to "male" is gender, thereby determining that the updated self-identified search condition is gender.

[0095] Step S506, determine and display the label corresponding to the element text and the updated self-identification search condition.

[0096] Specifically, the terminal can determine the corresponding label according to the updated self-identification search condition and the element text, and display the label in the search component.

[0097] In this embodiment, by identifying the element text input in the input box, the target search condition corresponding to the self-identification search condition can be determined, so as to form a label with the identified target search condition and the element text, and display the label in the search component. It can automatically determine the target search condition of the element text without the user selecting a specific target search condition, improving the efficiency of the user creating labels.

[0098] In an exemplary embodiment, a time selector is also displayed in the search component. The retrieval method based on the search component further includes: in response to a time selection operation on the time selector, displaying a time range label determined based on the time selection operation in the search component, and the time range label is used to limit the time range of the retrieval result.

[0099] Among them, the time selector is a common interactive component in front-end development, which is used to allow users to conveniently and intuitively select dates, times, or combinations of dates and times.

[0100] Specifically, the terminal can display the time selector in the search component. The terminal can, in response to a time selection operation on the time selector, display a time range label determined based on the time selection operation in the search component. In some examples, the target search condition included in the time range label is a time range, and the target search element included in the time range label is a time range composed of two time values.

[0101] In this embodiment, in response to a time selection operation on the time selector, displaying a time range label determined based on the time selection operation in the search component can enable the user to quickly limit the time range and improve the efficiency of determining the search condition.

[0102] In an exemplary embodiment, the retrieval method based on the search component further includes: displaying at least one label generated during the previous retrieval on the front-end page; the time range between the retrieval time of the previous retrieval and the current time meets a preset cache duration; in response to a click operation on the clear button in the search component, closing at least one label generated during the previous retrieval.

[0103] Among them, the cache duration can be the maximum time for which the label can be cached in the terminal.

[0104] Specifically, when the terminal opens the front-end page, the search component can display multiple tags determined during the previous retrieval. In some examples, when the terminal opens the front-end page, the search component can display multiple tags determined during the previous retrieval, and display the retrieval text in the input box during the previous retrieval. In some examples, when the terminal opens the front-end page, it can display the retrieval results during the previous retrieval in the result display area corresponding to the search component.

[0105] In some examples, a clear button corresponding to the tag may exist near the tag, and the terminal can respond to a click operation on the clear button in the search component to close at least one tag generated during the previous retrieval, so as to facilitate the user to retrieve again through the search component.

[0106] In this embodiment, by displaying at least one tag generated during the previous retrieval, and responding to a click operation on the clear button in the search component to close at least one tag generated during the previous retrieval, the user experience can be improved, the retrieval efficiency of the user under the same set of search conditions at different times can be improved, and the user is prevented from configuring the search conditions every time they retrieve.

[0107] As Figure 4 shown, the following combines a specific embodiment to detail the specific execution process of the above retrieval method based on the search component.

[0108] The front-end page is the part that the user directly interacts with when using Internet products (such as websites, web applications, mobile applications, etc.). The front-end page can present data and functions to the user in a visual and interactive manner. The search component is a component for retrieval among the multiple components included in the front-end page. The search component generally occupies a small area in the front-end page.

[0109] As Figure 4 shown, the search component may include an unexpanded dropdown box, an input box, and a retrieval button. The dropdown box can be displayed as a rectangular box with a downward arrow. When the user clicks on the dropdown box, a list containing multiple options will pop up, and the user can select an option from the list. After selection, the dropdown box will display the content of the option selected by the user. In addition to the search component, the front-end page also includes other components, which can also occupy a part of the area in the front-end page.

[0110] As Figure 5 shown, the dropdown box in the search component can be expanded to obtain an expanded main category dropdown box, and each main category dropdown box can contain corresponding search conditions. As Figure 5As shown, the preconfigured search conditions can be Search Condition 1 to Search Condition n. Additionally, the terminal can expand each main category dropdown box to obtain the expanded sub-category dropdown box corresponding to the main category dropdown box. For example, the sub-category dropdown box corresponding to Search Condition 2 includes Search Element 1 to Search Element n.

[0111] As Figure 6 shown, after the terminal configures the target search condition and the target search element, the dropdown box can be collapsed, and the labels corresponding to the target search condition and the target search element are displayed in the search component. For example, Target Search Condition 1 and Target Search Element 1 can be shown in Label 1, and Target Search Condition n and Target Search Element n can be shown in Label n.

[0112] In an exemplary embodiment, the embodiment of the present application proposes a compound condition filtering search component based on VUE3. The compound condition filtering search component can automatically identify which condition the user's search content belongs to, reducing the complexity of user operations; it can also display multiple conditions in one condition box when the user filters multiple conditions, making all conditions clear at a glance, and can modify the previous conditions; it can also automatically collect the user's previous search options so that the user can quickly filter when entering again.

[0113] Among them, the compound condition filtering search component is a component with compound search functions and supports multiple search conditions. The compound condition filtering search component includes an input box, a dropdown box, and time conditions, and also has the ability to perform linked processing of dropdown options, intelligently identify search content, and cache previous search conditions to improve the user search experience and performance.

[0114] Specifically, the compound condition filtering search component mainly includes: an input box, a dropdown box, a time selector, a search button, and a search result display area.

[0115] Among them, the input box is used to enter keywords. For example, the terminal can be two-way bound with searchConditions.keyword through v-model. v-model can be a syntactic sugar that automatically binds different events and attributes according to different form elements. searchConditions.keyword is usually a keyword used for searching, and it is an attribute of the searchConditions object. The searchConditions object may contain multiple search conditions, and keyword is an attribute representing the keyword among them.

[0116] The drop-down box can include a main category drop-down box and a subcategory drop-down box, which are bound to searchConditions.category and searchConditions.subCategory respectively using v-model. The selection of the main category drop-down box will update the options of the subcategory drop-down box.

[0117] The time picker can contain a start date and an end date, which are bound to searchConditions.startDate and searchConditions.endDate via v-model.

[0118] The search button can be used to trigger a search operation by clicking it. The search button can be called by calling the search method.

[0119] The search result display area can use v-for loop to display the search result list.

[0120] In some embodiments, the component initially consists of a condition drop-down box and an input box, with a clear button and a refresh button on the right; when the user clicks the input box to directly enter the search content, the search item can be adapted by regular matching whether the input content is a name or an ID, etc., and the search can be directly performed after pressing Enter.

[0121] In some embodiments, when the user first selects the condition drop-down box, the data of the condition drop-down box comes from the props of the component, which is an array containing various conditions, each condition containing its key, value, placeholder, source, params, etc. The user selects a specific search condition, then enters or selects the value of the search condition, and presses Enter to end the input of the option and initiate a request for search results. After the user selects multiple options, the options are displayed below the input box in the form of deletable labels. Clicking the X can remove the condition, and the user can also reselect the item to overwrite the value here.

[0122] In some embodiments, the data source of the drop-down box can be a source array, a url link request, and the input parameters of the searchParam request. When the drop-down is directly linked, the parent drop-down can set effectItemName, and the change event triggers the child data update. The child drop-down searches for the drop-down options according to the set searchParam conditions.

[0123] In some embodiments, intelligent recognition can be performed based on the input search content type and the type of input element. The current implementation has not been expanded in detail. The following is a possible implementation idea. For the keywords in the input box, if it is a pure number, it may be a search ID or quantity; if it is in date format, it may be a search for date-related information; if it is a string, it may be a search name or description, which can be matched more regularly. For the drop-down box, it can be determined whether the user is searching for categories, subcategories, etc. based on the selected value. For the time selector, the user is searching for data within a specific time range.

[0124] In some embodiments, the terminal can improve the intelligent recognition logic and accurately determine the user's search intention according to different types of input and business needs. For example, according to the content of keywords and the structure of data, the data can be more accurately screened and sorted.

[0125] In some embodiments, the terminal can configure the size and expiration time of the cache to avoid infinite storage of search conditions and results. LocalStorage or sessionStorage can be used to store the cache and an expiration time attribute can be added.

[0126] In some embodiments, the terminal can pre-process the search conditions, such as checking the legitimacy of the date range to avoid unnecessary requests. The terminal can also optimize the backend API to improve search performance, such as using indexing, caching and other technologies.

[0127] In this application, there is only one search box on the front-end page, which occupies a small area of ​​the page; users search for a single condition or multiple conditions in just one input box; users can automatically recognize content by simply entering it, without configuring search conditions, and can also search for text content by default; labels of all conditions can be displayed below the search box, the filtering conditions are clear at a glance, and the conditions can be deleted individually or cleared altogether; the terminal client caches the search conditions of this page and can obtain them directly, thereby improving search efficiency.

[0128] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0129] Based on the same inventive concept, an embodiment of the present application further provides a search component-based retrieval device for implementing the above-mentioned search component-based retrieval method. The solution provided by this device for solving problems is similar to the solution described in the above method. Therefore, the specific limitations in one or more embodiments of the search component-based retrieval device provided below can refer to the limitations on the search component-based retrieval method in the above text, and will not be elaborated here.

[0130] In an exemplary embodiment, as Figure 7 shown, a search component-based retrieval device 700 is provided, including: a search component display module 701, a tag display module 702, and a retrieval result display module 703, where:

[0131] The search component display module 701 is configured to display a search component for retrieval on a front-end page. A drop-down box and an input box are displayed in the search component; the drop-down box is used to determine a target search condition from multiple pre-configured search conditions; the drop-down box includes a main category drop-down box and a sub-category drop-down box corresponding to the main category drop-down box, and the search elements in the sub-category drop-down box change according to the search condition of the main category drop-down box;

[0132] The tag display module 702 is configured to, in response to a condition setting operation on the drop-down box and the input box, display at least one tag corresponding to the target search condition within the search component; the tag is used to display the target search condition and the target search element corresponding to the target search condition;

[0133] The retrieval result display module 703 is configured to, in response to an input operation on the input box and the retrieval button of the input box, display a retrieval result corresponding to the input operation in the result display area of the search component; the retrieval result meets the target search condition.

[0134] Furthermore, the search component includes a drop-down box and an input box, and the condition setting operation includes a condition selection operation and an element configuration operation. The tag display module 702 is specifically configured to: in response to a condition selection operation on the drop-down box, display multiple pre-configured search conditions in the main category drop-down box corresponding to the drop-down box; determine a target search condition from the multiple pre-configured search conditions, and display at least one tag corresponding to the target search condition in the search component; in response to an element configuration operation on the sub-category drop-down box and the input box, update the tag and display the updated tag.

[0135] Further, the element configuration operation includes an element selection operation and an element input operation. The label display module 702 is further specifically configured to: in response to a conditional selection operation on the main category dropdown box, determine a target search condition from multiple pre-configured search conditions, and display a sub-category dropdown box corresponding to the target search condition; in response to an element selection operation on the sub-category dropdown box, determine a target search element corresponding to the target search condition, or in response to an element input operation on the input box, determine a target search element corresponding to the target search condition; determine and display at least one label including the target search condition and the target search element.

[0136] Further, the retrieval result display module 703 is specifically configured to: in response to an input operation on the input box, display a keyword corresponding to the input operation in the input box; in response to an input operation on the retrieval button, display in the result display area of the search component a retrieval result for the keyword that meets the search conditions corresponding to the label.

[0137] Further, the label display module 702 is further specifically configured to: in response to a conditional selection operation on the dropdown box, determine the self-identified search condition as the target search condition among the multiple pre-configured search conditions displayed in the main category dropdown box corresponding to the dropdown box; in response to an element input operation on the input box, identify the input element text to obtain an identification result, and update the self-identified search condition based on the identification result; determine and display a label including the element text and the self-identified search condition after the update.

[0138] Further, a time selector is also displayed in the search component. The retrieval device based on the search component further includes a time label display module, which is specifically configured to: in response to a time selection operation on the time selector, display in the search component a time range label determined based on the time selection operation, and the time range label is used to limit the time range of the retrieval result.

[0139] Further, the retrieval device based on the search component further includes a label clearing module, which is specifically configured to: display in the front-end page at least one label generated during the previous retrieval; the time range between the retrieval time of the previous retrieval and the current time meets a preset cache duration; in response to a click operation on the clear button in the search component, close at least one label generated during the previous retrieval.

[0140] Each module in the above retrieval device based on the search component can be implemented in whole or in part by software, hardware, and their combination. The above modules can be embedded in the processor of the computer device in hardware form or be independent of it, or be stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to the above respective modules.

[0141] In an exemplary embodiment, a computer device is provided. The computer device may be a terminal, and its internal structural diagram may be as shown in Figure 8 shown. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit, and an input device. Among them, the processor, the memory, and the input / output interface are connected through a system bus, and the communication interface, the display unit, and the input device are connected to the system bus through the input / output interface. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and external devices. The communication interface of the computer device is used to communicate with external terminals in a wired or wireless manner. The wireless manner can be implemented through WIFI, a mobile cellular network, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a retrieval method based on a search component. The display unit of the computer device is used to form a visually visible picture, which can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen. The input device of the computer device can be a touch layer covering the display screen, or a button, a trackball, or a touchpad provided on the housing of the computer device, or an external keyboard, touchpad, or mouse, etc.

[0142] Those skilled in the art can understand that Figure 8 the structure shown in is only a block diagram of some structures related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0143] In an exemplary embodiment, a computer device is further provided, including a memory and a processor. A computer program is stored in the memory, and when the processor executes the computer program, the steps in the above method embodiments are implemented.

[0144] In an embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by the processor, the steps in the above method embodiments are implemented.

[0145] In an embodiment, a computer program product is provided, including a computer program. When the computer program is executed by the processor, the steps in the above method embodiments are implemented.

[0146] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use, and processing of relevant data need to comply with relevant regulations.

[0147] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, database, or other medium used in the embodiments provided in this application can include at least one of non-volatile and volatile memories. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc. The databases involved in the embodiments provided in this application can include at least one of relational databases and non-relational databases. Non-relational databases can include distributed databases based on blockchain, etc., and are not limited thereto. The processors involved in the embodiments provided in this application can be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, data processing logics based on quantum computing, etc., and are not limited thereto.

[0148] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as the scope recorded in this specification.

[0149] The above-described embodiments merely represent several implementation manners of the present application. The description thereof is relatively specific and detailed, but it should not be construed as a limitation to the patent scope of the present application. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all fall within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.

Claims

1. A retrieval method based on a search component, characterized in that: The method comprises: A search component for retrieval is displayed on the front page, wherein the search component includes a drop-down box and an input box; the drop-down box is used to determine a target search condition from a plurality of preconfigured search conditions; the drop-down box includes a main category drop-down box and a subcategory drop-down box corresponding to the main category drop-down box, and the search elements in the subcategory drop-down box change with the search condition of the main category drop-down box; In response to the condition setting operation for the drop-down box and the input box, at least one label corresponding to the target search condition is displayed in the search component; the label is used to display the target search condition and the target search element corresponding to the target search condition; In response to an input operation on the input box and a search button of the input box, a search result corresponding to the input operation is displayed in a result display area of ​​the search component; the search result satisfies the target search condition.

2. The method according to claim 1, characterized in that The search component includes a drop-down box and an input box; the condition setting operation includes a condition selection operation and an element configuration operation; In response to the condition setting operation for the drop-down box and the input box, displaying at least one label corresponding to the target search condition in the search component includes: In response to a condition selection operation on the drop-down box, displaying the plurality of preconfigured search conditions in a main category drop-down box corresponding to the drop-down box; Determining a target search condition from the multiple preconfigured search conditions, and displaying at least one tag corresponding to the target search condition in the search component; In response to the element configuration operation on the subcategory drop-down box and the input box, the label is updated and the updated label is displayed.

3. The method according to claim 2, characterized in that The element configuration operation includes an element selection operation and an element input operation; The determining a target search condition from the multiple preconfigured search conditions and displaying at least one label corresponding to the target search condition in the search component includes: In response to a condition selection operation on the main category drop-down box, determining a target search condition from the plurality of preconfigured search conditions, and displaying a subcategory drop-down box corresponding to the target search condition; In response to an element selection operation on the subcategory drop-down box, determining a target search element corresponding to the target search condition, or, in response to an element input operation on the input box, determining a target search element corresponding to the target search condition; At least one tag including the target search condition and the target search element is determined and displayed.

4. The method according to claim 2, characterized in that: In response to the input operation on the input box and the search button of the input box, displaying the search result corresponding to the input operation in the result display area of ​​the search component includes: In response to an input operation on the input box, displaying a keyword corresponding to the input operation in the input box; In response to an input operation on the search button, search results for the keyword and satisfying the search condition corresponding to the tag are displayed in a result display area of ​​the search component.

5. The method according to claim 3, characterized in that: In response to the condition setting operation for the drop-down box and the input box, displaying at least one label corresponding to the target search condition in the search component includes: In response to a condition selection operation on the drop-down box, determining a self-identification search condition as a target search condition among a plurality of preconfigured search conditions displayed in a main category drop-down box corresponding to the drop-down box; In response to an element input operation for the input box, the input element text is recognized to obtain a recognition result, and the self-recognition search condition is updated based on the recognition result; A label corresponding to the element text and the updated self-identification search criteria is determined and displayed.

6. The method according to claim 2, characterized in that The search component also displays a time selector; the method further includes: In response to a time selection operation on the time selector, a time range label determined based on the time selection operation is displayed in the search component, and the time range label is used to limit the time range of the retrieval result.

7. The method according to claim 1, characterized in that The method further comprises: Displaying at least one tag generated during the last search on the front-end page; the time range between the search time of the last search and the current time satisfies the preset cache duration; In response to a click operation on a clear button in the search component, at least one tag generated during the last search is closed.

8. A retrieval device based on a search component, characterized in that: The device comprises: A search component display module is used to display a search component for retrieval in a front-end page, wherein a drop-down box and an input box are displayed in the search component; the drop-down box is used to determine a target search condition from a plurality of pre-configured search conditions; the drop-down box includes a main category drop-down box and a subcategory drop-down box corresponding to the main category drop-down box, and the search elements in the subcategory drop-down box change with the search condition of the main category drop-down box; A label display module, used for displaying at least one label corresponding to the target search condition in the search component in response to the condition setting operation for the drop-down box and the input box; the label is used to display the target search condition and the target search element corresponding to the target search condition; A retrieval result display module is used to respond to input operations on the input box and the retrieval button of the input box, and display the retrieval results corresponding to the input operations in the result display area of ​​the search component; the retrieval results meet the target search conditions.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images