Selection box multi-choice label processing device in semiconductor manufacturing execution system

Abstract

The invention discloses a selection box multi-choice label processing device in a semiconductor manufacturing execution system, and aims to solve the problems of low rendering efficiency and insufficient multi-choice label display adaptive capability under the condition of large data volume. The device comprises a user operation response module, a label processing engine, a virtual scrolling engine and an interaction processing module. The label processing engine automatically folds the over-limit labels according to a preset priority by dynamically calculating the total width of the labels and comparing the total width with the available width of the container. The virtual scrolling engine calculates a visible item index by monitoring a scrolling event, and only renders a visible area item to improve performance. And the interactive processing module coordinates the two to work cooperatively. According to the method, the response efficiency and the user experience of a system interface under a large data volume are effectively improved.

Description

Technical Field

[0001] This invention belongs to the field of semiconductor manufacturing technology, and particularly relates to a multi-select label processing device for a selection box in a semiconductor manufacturing execution system. Background Technology

[0002] In Manufacturing Execution Systems (MES), selection boxes are a key element of the user interface, widely used in scenarios such as equipment selection and product management. Existing technologies, mainstream UI component libraries (such as Element UI Select or Ant DesignSelect) provide basic selection functionality but lack virtual scrolling technology. When handling massive amounts of data (such as lists of tens of thousands of devices), this can easily lead to rendering stutters, prolonged response times, and significant performance bottlenecks. Furthermore, in multi-select mode, label display lacks adaptive capabilities, failing to dynamically collapse according to container width, requiring pre-configuration of the display quantity, resulting in configuration redundancy and inconvenient interaction. Native controls in industrial MES systems (such as those in Siemens or Rockwell Automation systems) typically use traditional pagination methods to process data. However, pagination mechanisms can have response times of 800-1200 milliseconds during complex queries, and configuration relies on specialized development skills, resulting in high system closure and limited scalability. In addition, existing technologies lack standardized business linkage mechanisms, requiring developers to hard-code event listeners, increasing development complexity and maintenance costs. Therefore, existing technologies suffer from low rendering efficiency of selection box components when handling large amounts of data and insufficient adaptive display of multi-select labels, resulting in low operational efficiency and poor scalability of MES systems in highly complex business scenarios. Summary of the Invention

[0003] The technical problem to be solved by the present invention is to provide a multi-select label processing device for selection boxes in a semiconductor manufacturing execution system, which effectively solves the technical problems of low rendering efficiency and insufficient adaptive display of multi-select labels when the selection box component processes large amounts of data in the prior art.

[0004] To solve the above-mentioned technical problems, the technical solution adopted by the present invention is: a multi-selection label processing device for selection boxes in a semiconductor manufacturing execution system, comprising: The user operation response module is used to respond to user operations and obtain the text content of multiple selected labels in the current selection box container; The tag processing engine, connected to the user operation response module, manages the display of selected tags by dynamically calculating the display width of the selected tags and automatically folding them according to the available width of the selection box container. The virtual scrolling engine, connected to the user operation response module, is used to manage the scrolling of a large amount of data in the drop-down list by listening to scrolling events, calculating the index of visible items, and dynamically rendering items in the visible area. The interaction processing module is connected to the label processing engine and the virtual scrolling engine respectively, and is used to coordinate the collaborative work of label display and virtual scrolling.

[0005] The aforementioned apparatus, the tag processing engine, includes: The tag width calculation unit is used to dynamically calculate the display width of each tag based on the native DOM application interface; The width accumulation unit is used to accumulate the width values ​​of all tags to obtain the total width; A folding determination unit is used to compare the total width with the available width of the selection box container; The label folding unit is used to automatically fold the excess part of the label according to the preset folding priority rules; The tag deletion processing unit is used to monitor and process tag deletion operations; The virtual scrolling engine includes: A scroll listener unit is used to listen for scroll events of the dropdown list container; Index calculation unit, used for indexing based on fixed item height H item Calculate the start and end indices of the visible items; The dynamic rendering unit is used to render only the items within the visible area and use placeholder elements to maintain the scrollbar ratio.

[0006] The aforementioned device further includes a parameterized service linkage module, which comprises: The dependency field configuration unit is used to configure the dependency fields of the selection box; The listener management unit is used to register listeners for value changes of dependent fields; The data management unit is used to perform a clear operation and re-request data when dependent fields change.

[0007] The aforementioned device further includes a data conversion module, which comprises: The data receiving unit is used to receive the raw response data of asynchronous data requests; Data standardization units are used to perform filtering and mapping processing on the raw response data; Data storage unit, used to store converted standard data format.

[0008] The aforementioned device further includes a search management module, which includes: The loading status detection unit is used to detect the loading status of the drop-down data; Hybrid search unit, supporting local filtering and remote search; Temporary data management unit, used to manage newly created options.

[0009] The hybrid search unit in the aforementioned device further includes a debouncing submodule for optimizing the search request frequency.

[0010] The temporary data management unit of the above-mentioned device further includes a cache management submodule, which is used to manage the storage lifecycle of temporary data, including setting the cache expiration time T and the maximum cache quantity M, where T is a time threshold and M is a preset positive integer.

[0011] The aforementioned device, wherein the tag deletion processing unit supports both single deletion and batch deletion operation modes.

[0012] The above-mentioned device, in the virtual scrolling engine, has a fixed item height H. item Defined through CSS styles.

[0013] The aforementioned apparatus, wherein the dynamic rendering unit further includes a scroll bar scaling maintenance submodule, which sets the height of the placeholder element by calculating the total height of the non-visible area, using the formula H. placeholder =(NI end +I start )×H item Calculate, where N is the total number of items in the drop-down list, and I start and I end These are the starting and ending indices of the visible items, H. item To fix the project height, H placeholder This represents the height of the placeholder element.

[0014] The aforementioned device, wherein the tag folding unit further includes a priority configuration submodule, which allows users to define the priority order of tag folding through a configuration file, and supports custom folding rules based on business importance. Compared with existing technologies, this invention has the following advantages: The tag width calculation unit in the tag processing engine dynamically calculates the display width of each tag based on the native DOM application interface. Combined with the width accumulation unit and the collapse judgment unit, it automatically compares the total tag width with the available container width, enabling the tag collapse unit to adaptively collapse according to preset rules without pre-configuring the display quantity. This solves the problems of inflexible display and redundant configuration of multi-selection tags, improving space utilization and user interaction convenience. Simultaneously, the virtual scrolling engine tracks scroll events in real time and calculates the index of visible items through the scroll listening unit and index calculation unit. The dynamic rendering unit only renders items within the visible area and uses placeholder elements to maintain the scrollbar ratio, significantly reducing the number of DOM elements and effectively overcoming rendering lag issues under massive data, improving response speed and system performance. Furthermore, the interaction processing module coordinates the collaborative work of the tag processing engine and the virtual scrolling engine, ensuring seamless integration of tag display and data scrolling, further enhancing the overall smoothness and scalability of the operation, enabling the MES system to operate efficiently in highly complex business scenarios.

[0015] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0016] Figure 1 This is a schematic diagram of the device module of the present invention.

[0017] Figure 2 This is an architecture diagram of the tag processing engine.

[0018] Figure 3 This is an architecture diagram of the virtual scrolling engine.

[0019] Figure 4 This is the architecture diagram for the parameterized business linkage module.

[0020] Figure 5 This is an architecture diagram of the data transformation module.

[0021] Figure 6 This is an architecture diagram of the search management module. Detailed Implementation

[0022] like Figure 1-6 As shown, a multi-selection label processing device for a semiconductor manufacturing execution system includes: The user operation response module is used to respond to user operations and obtain the text content of multiple selected labels in the current selection box container; A tag processing engine, connected to the user operation response module, manages the display of selected tags by dynamically calculating the display width of the selected tags and automatically collapsing them based on the available width of the selection box container; including: The tag width calculation unit is used to dynamically calculate the display width of each tag based on the native DOM application interface; the width value of each tag is determined by a function. The calculation yields w. i This represents the width of the i-th tag in pixels. The function f is implemented by calling the getBoundingClientRect() method of the DOM element. The width accumulation unit is used to sum the width values ​​of all tags to obtain the total width; total width , where n is the number of tags; The folding determination unit is used to determine the total width W. total With the available width W of the selection box container container Compare, if W total >W container If the label collapses, the label collapse unit is triggered; otherwise, all labels are displayed directly. The label folding unit is used to automatically fold the excess part of the label according to the preset folding priority rules; The tag deletion processing unit is used to monitor and process tag deletion operations; A virtual scrolling engine, connected to the user operation response module, manages the scrolling of large amounts of data in a dropdown list by listening to scroll events, calculating the index of visible items, and dynamically rendering items in the visible area; including: A scroll listener unit is used to listen for scroll events of the dropdown list container; Index calculation unit, used for indexing based on fixed item height H item Calculate the starting index of currently visible items. and end index ,in This indicates rounding down. Indicates rounding up; The dynamic rendering unit is used to render only items within the visible area and use placeholder elements to maintain the scrollbar ratio. The interaction processing module is connected to the label processing engine and the virtual scrolling engine respectively, and is used to coordinate the collaborative work of label display and virtual scrolling.

[0023] In implementation, when a user interacts with a selection box on the device management interface of the semiconductor manufacturing execution system, the user action response module first detects the user's action, such as the user triggering the expansion or search of the selection box through mouse clicks or keyboard input. This module uses the browser's event listening mechanism, such as listening for click or input events, to obtain the text content of multiple selected labels within the current selection box container. For example, if the user has selected three device model labels, with text content indicating device model A, device model B, and device model C, the user action response module uses these label texts as input data and passes them to the label processing engine and virtual scrolling engine to initiate subsequent processing.

[0024] After the tag processing engine receives the tag text, the tag width calculation unit begins its work. This unit dynamically calculates the display width of each tag using the native DOM application interface. Specifically, the tag width calculation unit calls the DOM's `getBoundingClientRect` method for each tag element. This method returns an object containing attributes such as width and height. The width value is calculated based on the tag's font size and text length; the font size is defined by CSS styles, such as 14 pixels, and the text length refers to the number of characters, for example, the text length for device model A is 10 characters. The actual width value obtained through the `getBoundingClientRect` method is in pixels; for example, the tag width for device model A is calculated to be 80 pixels, for device model B it is 85 pixels, and for device model C it is 90 pixels. The width accumulation unit then accumulates the width values ​​of all tags to obtain the total width. The accumulation process is a simple arithmetic summation; for example, the sum of the widths of three tags is 80 pixels + 85 pixels + 90 pixels, resulting in a total width of 255 pixels. The collapse decision unit compares the total width with the available width of the selection container; the available width of the container is obtained through DOM properties, for example, a container width of 200 pixels. The comparison logic is as follows: if the total width is greater than the container width, the label collapse unit is triggered; otherwise, all labels are displayed directly.

[0025] In this example, the total width of 255 pixels is greater than the container width of 200 pixels, so the folding judgment unit triggers the label folding unit. The label folding unit automatically folds the excess labels according to preset folding priority rules; the priority rules can be based on business configuration, for example, device model A has the highest priority, device model B is next, and device model C has the lowest priority. The folding unit first retains the high-priority labels, folds the low-priority labels, and displays a folding prompt message, such as a plus sign followed by a number, for example, displaying "+1" after folding device model C.

[0026] The tag deletion processing unit listens for user deletion operations and supports single and batch deletion modes. Single deletion is achieved by the user clicking the close icon on the tag, while batch deletion is completed via keyboard shortcuts or selecting all. After deletion, the tag processing engine recalculates the tag layout to ensure adaptive updates. This enables intelligent collapsing of multi-selected tags, eliminating the need for manual configuration of the displayed number, reducing interface redundancy, and improving space utilization.

[0027] The virtual scrolling engine works in parallel with the tag processing engine to handle large amounts of data in the dropdown list. The scroll listening unit listens for scroll events of the dropdown list container, for example, by listening to the `scroll` event to obtain the scroll distance (`scrollTop` value). The scroll distance is in pixels and represents the distance from the top of the container to the top of the visible area. The index calculation unit calculates the start and end indices of the currently visible item based on a fixed item height; the fixed item height is defined by CSS styles, for example, each item is 40 pixels high.

[0028] The index calculation unit uses a mathematical formula to calculate the starting index as the scroll distance divided by the item height, rounded down, and the ending index as the starting index plus the visible area height divided by the item height, rounded up. For example, if the dropdown list has 1000 items, the visible area height is 200 pixels, and the item height is 40 pixels, then there are 5 visible items. Assuming the scroll distance is 80 pixels, the starting index is calculated as 80 divided by 40, which equals 2, rounded down to 2; the ending index is calculated as 2 plus 200 divided by 40, which equals 5, rounded up to 7.

[0029] Therefore, the visible item range is from index 2 to index 7, that is, the 3rd to the 8th item. The dynamic rendering unit only renders items within the visible range; the rendering process is achieved by dynamically creating and destroying elements through DOM manipulation, for example, only creating the item elements corresponding to indices 2 to 7 and inserting them into the container. Simultaneously, the dynamic rendering unit uses placeholder elements to maintain the scrollbar proportions; the height of the placeholder elements is set by calculating the total height of the non-visible area, for example, subtracting the number of visible items from the total number of items (1000) and then multiplying by the item height of 40 pixels, resulting in a placeholder element height of 39760 pixels, ensuring that the scrollbar behavior is consistent with the full list. This significantly reduces the number of elements rendered simultaneously, lowering the browser's rendering load.

[0030] The interaction processing module coordinates the collaborative work of the tag processing engine and the virtual scrolling engine. When a user adds a new tag or deletes an existing tag, the interaction processing module receives a signal from the user action response module and synchronously updates the states of both engines. For example, after a user adds device model D, the tag processing engine recalculates the tag width and collapsibility, and the virtual scrolling engine may adjust its rendering range due to data updates. The interaction processing module ensures a reasonable order of operations and avoids conflicts through an event bus or callback mechanism; for example, it prioritizes user interaction events before executing data requests or rendering updates. During scrolling or searching, this module manages asynchronous operations to ensure smooth interface response. Through this collaboration, the system maintains high performance under high load scenarios.

[0031] This implementation detail achieves front-end performance optimization through a refined adaptive label folding and virtual scrolling mechanism. For example, when processing tens of thousands of data points in the device management interface, the selection box component renders only a small number of elements, reducing response time from seconds to milliseconds compared to traditional pagination. Simultaneously, collaborative operation avoids interface lag and improves user operation efficiency. The entire solution reduces the resource overhead of the MES system and enhances scalability.

[0032] like Figure 4 As shown, in one embodiment, a parameterized service linkage module is also included, the parameterized service linkage module comprising: The dependency field configuration unit is used to configure the dependency fields of the selection box; The listener management unit is used to register listeners for value changes of dependent fields; The data management unit is used to perform a clear operation and re-request data when dependent fields change.

[0033] In implementation, the selection box component in the equipment management interface is used to select equipment models and may depend on other input fields, such as production line number and process flow. The dependency field configuration unit allows developers to set dependencies through configuration files; for example, defining the `deps` field as "lineNumber-processFlow" in the JSON configuration indicates that the selection box depends on these two fields. The listener management unit registers value change listeners for these dependency fields. These listeners are implemented based on the browser's event listener API, such as using the `addEventListener` method to listen for `input` or `change` events. When a user changes the production line number from "LineA" to "LineB", the listener detects the value change and triggers a callback function. The data management unit then performs a clearing operation, including clearing the currently selected value of the selection box (e.g., removing the selected equipment model label) and asynchronously re-requesting the dropdown list data, for example, by sending a request to the server via the Fetch API to obtain the list of equipment models corresponding to the new production line. Through this parameterized configuration and automatic listening mechanism, standardized business linkage is achieved, reducing the workload of developers manually writing event handling code and ensuring data real-time performance and logical consistency.

[0034] like Figure 5 As shown, in one embodiment, a data conversion module is further included, the data conversion module comprising: The data receiving unit is used to receive the raw response data of asynchronous data requests; Data standardization units are used to perform filtering and mapping processing on the raw response data; Data storage unit, used to store converted standard data format.

[0035] During implementation, when the parameterized business linkage module initiates a data request, the data receiving unit obtains the asynchronously returned raw response data. This raw data may be in JSON format, such as an array containing a list of device models, with each element having `deviceModel` and `status` fields. The data standardization unit performs filtering and mapping processing on the raw data, for example, filtering out records where the `status` field value is "inactive" and mapping the `deviceModel` field to the standard name `model`. The mapping process is implemented by traversing the data array and modifying the field keys. The data storage unit stores the converted standard data in an in-memory data structure, such as using a JavaScript array to store the filtered list of device models, for direct use by the selection component. Through data filtering and mapping, data format uniformity is achieved, preventing business logic errors due to data inconsistency and improving system reliability.

[0036] like Figure 6As shown, in one embodiment, a search management module is also included, the search management module comprising: The loading status detection unit is used to detect the loading status of the drop-down data; Hybrid search unit, supporting local filtering and remote search; Temporary data management unit, used to manage newly created options.

[0037] During implementation, in the device management interface, when a user expands a selection box or enters search text, the loading status detection unit checks the loading status of the drop-down data. For example, it checks the `isLoading` flag; if it's true, a rotating icon is displayed to prompt the user to wait. The hybrid search unit supports local filtering and remote searching. Local filtering performs keyword matching on already loaded data; for example, when a user enters "Dev," the unit iterates through the local data array to find records where the `model` field contains "Dev." Remote searching initiates API requests when no local results are found, such as sending search keywords to the server using a debouncing mechanism. The temporary data management unit handles new options quickly created by the user. For example, when no search results are found, if a user enters a new device model "DeviceX" and confirms creation, the unit adds the option to the temporary list and manages its lifecycle. By combining local and remote searching with temporary data management, the system achieves fast and flexible search response, reducing user waiting time.

[0038] In one embodiment, the hybrid search unit further includes a debouncing submodule for optimizing the search request frequency.

[0039] In implementation, this submodule optimizes the search request frequency by setting a timer. For example, a delay threshold of 500 milliseconds is defined. When a user continuously enters search text, the debouncing submodule starts the timer, triggering a search request only if no new input occurs within 500 milliseconds after the user stops typing. In the device management interface, when a user quickly enters "Device," the submodule ignores intermediate inputs such as "Dev," initiating a search only for the complete keyword "Device." By delaying and merging search requests, network requests are reduced, server load is lowered, and search efficiency is improved.

[0040] In one embodiment, the temporary data management unit further includes a cache management submodule, which is used to manage the storage lifecycle of temporary data, including setting the cache expiration time T and the maximum cache quantity M, where T is a time threshold and M is a preset positive integer.

[0041] In implementation, this submodule manages the storage lifecycle of temporary data by setting the cache expiration time T to 10 minutes and the maximum cache size M to 100 entries. When a user creates a temporary option, such as a new device model "DeviceY", the cache management submodule adds it to the cache array and records the creation timestamp. The submodule periodically runs cleanup tasks, such as checking the cache every 60 seconds. If data has existed for more than 10 minutes or the number of cached entries exceeds 100, the oldest or lowest priority data is automatically deleted. By controlling time thresholds and quantity limits, orderly management of temporary data is achieved, preventing excessive memory consumption.

[0042] In one embodiment, the tag deletion processing unit supports both single deletion and batch deletion operation modes.

[0043] In implementation, the single deletion mode is triggered by the user clicking the close icon on the label. The label deletion processing unit listens for the click event, and using an event delegation mechanism, identifies the target label and removes the corresponding element from the DOM, while simultaneously updating the internal data state. The batch deletion mode is implemented via keyboard shortcuts or context menus. For example, if the user holds down the Ctrl key to select multiple labels and then presses the Delete key, the unit iterates through the selected label set and removes all related elements at once. In the device management interface, users can delete device models A, B, and C one by one, or delete all selected labels at once. By providing multiple deletion methods, the system achieves convenient and efficient user interaction, adapting to different operating habits.

[0044] In one embodiment, the fixed item height H in the virtual scrolling engine item Defined through CSS styles.

[0045] In implementation, the dropdown list item elements apply CSS classes, such as defining `.item-height { height: 40px;}`. The virtual scrolling engine's index calculation unit directly references this CSS value for calculation, rather than hardcoding the height value. In the device management interface, the height of each device model item is uniformly 40 pixels. The index calculation unit uses the `getComputedStyle` method to obtain the actual height value, ensuring accurate scrolling calculations. Defining the height through CSS achieves configurability and maintainability of the style, making it easier for front-end developers to adjust the layout.

[0046] In one embodiment, the dynamic rendering unit further includes a scrollbar scaling submodule, which sets the height of the placeholder element by calculating the total height of the non-visible area using the formula H. placeholder =(NI end +I start )×H itemCalculate, where N is the total number of items in the drop-down list, and I start and I end These are the starting and ending indices of the visible items, H. item For fixed project height.

[0047] During implementation, this submodule sets the height of the placeholder element by calculating the total height of the non-visible area, using the formula H. placeholder =(NI end +I start )×H item Where N is the total number of items in the drop-down list, I start and I end These are the starting and ending indices of the visible items, H. item To fix the project height, H placeholder This represents the height of the placeholder element. In the device management interface, the total number of items N is 1000, and I... start For 2, I end It is 7, H item If the height is 40 pixels, then the placeholder element height is calculated as (1000-7+2)×40=39800 pixels. The dynamic rendering unit inserts placeholder elements into the DOM and sets their height while rendering visible items to maintain the scrollbar proportions. By accurately calculating the placeholder element height, realistic scrollbar behavior is achieved, avoiding jerking or distortion during scrolling.

[0048] In one embodiment, the tag folding unit further includes a priority configuration submodule, which allows users to define the priority order of tag folding through a configuration file, supporting custom folding rules based on business importance.

[0049] In implementation, this submodule allows users to define the priority order of tag collapse via a configuration file. The configuration file can be in JSON format, such as specifying device model A as priority 1 (highest), device model B as priority 2, and device model C as priority 3. When the total width of the tags exceeds the container, the tag collapse unit reads the configuration file and prioritizes collapsing tags with higher priority values, such as collapsing device model C and displaying a "+1" prompt. In the device management interface, users can customize business importance by editing the configuration file, and the unit dynamically applies new rules. Through the priority configuration mechanism, flexible customization of collapse rules is achieved, meeting the needs of complex business scenarios.

[0050] The above description is merely a preferred embodiment of the present invention and does not constitute any limitation on the present invention. Any simple modifications, alterations, or equivalent structural changes made to the above embodiments based on the technical essence of the present invention shall still fall within the protection scope of the present invention.

Claims

1. A multi-select label processing device for selection boxes in a semiconductor manufacturing execution system, characterized in that, include: The user operation response module is used to respond to user operations and obtain the text content of multiple selected labels in the current selection box container; The tag processing engine, connected to the user operation response module, manages the display of selected tags by dynamically calculating the display width of the selected tags and automatically folding them according to the available width of the selection box container. The virtual scrolling engine, connected to the user operation response module, is used to manage the scrolling of a large amount of data in the drop-down list by listening to scrolling events, calculating the index of visible items, and dynamically rendering items in the visible area. The interaction processing module is connected to the label processing engine and the virtual scrolling engine respectively, and is used to coordinate the collaborative work of label display and virtual scrolling.

2. The apparatus as claimed in claim 1, characterized in that, The tag processing engine includes: The tag width calculation unit is used to dynamically calculate the display width of each tag based on the native DOM application interface; The width accumulation unit is used to accumulate the width values ​​of all tags to obtain the total width; A folding determination unit is used to compare the total width with the available width of the selection box container; The label folding unit is used to automatically fold the excess part of the label according to the preset folding priority rules; The tag deletion processing unit is used to monitor and process tag deletion operations; The virtual scrolling engine includes: A scroll listener unit is used to listen for scroll events of the dropdown list container; Index calculation unit, used for indexing based on fixed item height H item Calculate the start and end indices of the visible items; The dynamic rendering unit is used to render only the items within the visible area and use placeholder elements to maintain the scrollbar ratio.

3. The apparatus as described in claim 1, characterized in that, It also includes a parameterized service linkage module, which includes: The dependency field configuration unit is used to configure the dependency fields of the selection box; The listener management unit is used to register listeners for value changes of dependent fields; The data management unit is used to perform a clear operation and re-request data when dependent fields change.

4. The apparatus as described in claim 3, characterized in that, It also includes a data conversion module, which includes: The data receiving unit is used to receive the raw response data of asynchronous data requests; Data standardization units are used to perform filtering and mapping processing on the raw response data; Data storage unit, used to store converted standard data format.

5. The apparatus as claimed in claim 1, characterized in that, It also includes a search management module, which includes: The loading status detection unit is used to detect the loading status of the drop-down data; Hybrid search unit, supporting local filtering and remote search; Temporary data management unit, used to manage newly created options.

6. The apparatus as claimed in claim 5, characterized in that, The hybrid search unit also includes a debouncing submodule for optimizing the search request frequency.

7. The apparatus as claimed in claim 5, characterized in that, The temporary data management unit also includes a cache management submodule, which is used to manage the storage lifecycle of temporary data, including setting the cache expiration time T and the maximum cache quantity M, where T is a time threshold and M is a preset positive integer.

8. The apparatus as claimed in claim 1, characterized in that, The fixed item height H in the virtual scrolling engine item Defined through CSS styles.

9. The apparatus as claimed in claim 2, characterized in that, The dynamic rendering unit also includes a scrollbar scaling maintenance submodule. This submodule sets the height of the placeholder element by calculating the total height of the non-visible area, using the formula H. placeholder =(NI end +I start )×H item Calculate, where N is the total number of items in the drop-down list, I start and I end These are the starting and ending indices of the visible items, H. item To fix the project height, H placeholder This represents the height of the placeholder element.

10. The apparatus as claimed in claim 2, characterized in that, The tag folding unit also includes a priority configuration submodule, which allows users to define the priority order of tag folding through a configuration file and supports custom folding rules based on business importance.

Images