TEST CASES COVERED:

• User Input Handling:
  • The script responds to user input in the search input field.
  • As the user types, the dropdown displays suggestions based on the search criteria.
  • Suggestions are based on whether the search term matches any part of the data (name, email, or employeeID).
  • Here you can search by name: test_1 email: test1@hotmail.com empID: emp01 by entering minimum 3 characters.

• Dropdown Generation:
  • The script generates dropdown items based on the provided response data.
  • Duplicate items are not added to the dropdown, and only distinct suggestions are displayed.

• Dropdown Navigation:
  • Users can navigate through dropdown suggestions using arrow keys (Up and Down).
  • Pressing Enter selects the highlighted suggestion.

• Maximum Selection Limit: [ 3 in this case ]
  • Users can select a maximum number of items (max_search_select_limit) from the dropdown.
  • If the selection limit is reached, an error message is displayed.

• Selected Items Display:
  • The selected items are displayed below the search input as the user selects them.
  • Users can remove selected items by clicking on a delete icon.

APPROACH

• Data Generation:
  • An array response of 20 objects with different properties is generated.
  • Each object contains id, name, email, and employeeID.

• Initialization:
  • A selected_items object keeps track of selected items for each search box.
  • A search_info_obj object maintains active index, total items, and other search-related information.

• Debounce Function:
  • A debounce function is used to limit API requests triggered by user input.

• Search Term Validation:
  • The function isSearchTermPresent checks if the search term is present in any of the object properties.

• Dropdown Update:
  • The function updateDropdown handles user input in the search field.
  • Based on the search term, it filters the response and generates dropdown items.
  • The active index, total items, and other search-related information are updated in search_info_obj.

• Dropdown Interaction:
  • Users can navigate through dropdown suggestions using arrow keys.
  • Pressing Enter selects a suggestion and adds it to the selected items.

• Selected Items Display:
  • The function getSearchSelectedItems generates HTML to display selected items.
  • Selected items are shown below the search input.

• Limiting Selection:
  • If the maximum selection limit is reached, an error message is displayed.

• Document Ready Event:
  • The script is initialized on document ready.
  • The updateDropdown function is triggered when the user types in the search input.

• Overall, the script handles various user interactions such as searching, selecting, navigating the dropdown, and displaying selected items. It implements both UI interactions and data management aspects to create a functional search-select filter dropdown.