Description
Redevelop the existing "Scan & Search" sample (scenarios/scan-and-search/scan-and-search.html) to include configurable filter and validator controls in the UI. The current sample is minimal — it scans a single barcode and shows placeholder product info with no filtering or validation options.
The enhanced sample should be adaptable to different real-world lookup/search scenarios by letting users configure:
- Barcode format filter — restrict which barcode symbologies are accepted (e.g., QR Code only, 1D retail codes only, specific formats like Code 128, EAN-13, etc.)
- Barcode string length filter — set min/max character length to reject results outside expected ranges
- Barcode string keywords filter — match or reject scanned results based on keyword/pattern rules (e.g., must contain "SN-", must start with digits, etc.)
User Scenarios
- Warehouse lookup: User scans inventory barcodes but only wants Code 128 results with exactly 10 characters — other scans should be ignored.
- Retail product search: User scans UPC/EAN codes and wants to filter out non-retail symbologies (QR, DataMatrix) that may appear on packaging.
- Serial number validation: User scans barcodes and only wants results matching a specific pattern (e.g., starts with "SN-" and is 12-20 characters long).
Dependencies
- Dynamsoft Barcode Reader JS SDK (BarcodeScanner API)
- Current sample at
scenarios/scan-and-search/scan-and-search.html as starting point
Notes
- The UI controls should be intuitive and not overwhelm the search-bar UX
- Consider a collapsible "Filters" panel or sidebar
- Filters should apply in real-time during scanning (reject non-matching results before displaying)
Description
Redevelop the existing "Scan & Search" sample (
scenarios/scan-and-search/scan-and-search.html) to include configurable filter and validator controls in the UI. The current sample is minimal — it scans a single barcode and shows placeholder product info with no filtering or validation options.The enhanced sample should be adaptable to different real-world lookup/search scenarios by letting users configure:
User Scenarios
Dependencies
scenarios/scan-and-search/scan-and-search.htmlas starting pointNotes