Merge branch '_dev' of https://github.com/Dynamsoft/barcode-reader-javascript-samples into _dev

Author: Shen-wb

README.md

@@ -4,18 +4,34 @@ This repository contains multiple samples that demonstrates how to use the [Dyna
 
 ## Get the Code
 
-Since the repository has a lot of history, it is slow to clone directly. Please download the [zip](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.zip)/[tar.gz](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.tar.gz), or use the `--depth 1` to clone the code.
+Cloning the full repository may be slow due to its extensive history. To get started quickly, you have a few options:
+
+- Download as [zip](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.zip)
+- Download as [tar.gz](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.tar.gz)
+- Shallow clone with Git:
+
 ```git
 git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --depth 1
 ```
 
+> [!NOTE]
+> If you expect unstable network conditions or prefer to work entirely offline, you can download the [offline package from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/). This includes the full repository and all required dependencies for offline use.
+>
+> **Running the Samples Locally**
+>
+> Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
+>
+> 1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
+>
+> 2. Right-click on `hello-world.html` and select "Open with Five Server". This will serve the application at `http://127.0.0.1:5500/hello-world.html`.
+
 ## Request a trial license
 
 A default license is included which allows you to test the sample apps for up to 24 hours. You can [request a 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via Dynamsoft website to evaluate further.
 
 ## Documentation
 
-For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/?ver=10.5.1000&utm_source=sampleReadme).
+For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/?ver=10.5.3000&utm_source=sampleReadme).
 
 ## Support
 
@@ -30,6 +46,7 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 Get the basic features working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), with RTU-BarcodeScanner APIs.
 
 * [**Scan Single Barcode**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?utm_source=sampleReadme): Scan single barcode from video stream with minimum code in JavaScript.
+* [**Scan Single Barcode**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html?utm_source=sampleReadme): Scan a barcode to retrieve the relevant product information from the database in JavaScript.
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
 * [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
 * [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.

barcode-scanner-api-samples/scan-multiple-barcodes/README.md

@@ -73,6 +73,7 @@ A list of 20 dummy products is used, with each scan randomly adding a product to
 Multiple samples are provided for single barcode scanning. These samples can be easily adapted to scan multiple unique barcodes by simply updating the `config` object.
 
 * [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode): Scan single barcode from video stream with minimum code in JavaScript.
+* [**Scan and Search**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode): Scan a barcode to retrieve the relevant product information from the database in JavaScript.
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
 * [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
 * [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.

barcode-scanner-api-samples/scan-single-barcode/README.md

@@ -1,14 +1,16 @@
-# 📦 Scan Single Barcode - Hello World
+# 📦 Scan Single Barcode 
+
+## 🚀 1.Hello World
 
 This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/) to scan a **single barcode** from a video stream using plain JavaScript.
 
-## ✨ Features
+### ✨ Features
 
 - Uses `BarcodeScanner` APIs from `dynamsoft-barcode-reader-bundle`
 - Scans a single barcode at a time
 - UI rendered to a container element
 
-## 🔧 How It Works
+### 🔧 How It Works
 
 The sample uses the `BarcodeScanner` class to launch a scanner and decode a single barcode from a camera stream. The key configuration includes:
 
@@ -34,11 +36,34 @@ const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
 barcodeScanner.launch();
 ```
 
-## 📌 Notes
+### 📌 Notes
 
 - This sample scans one **single barcode**, you can configure `scanMode` to change the behavior to scan multiple barcodes.
 - To avoid network-related loading issues, consider hosting all required resources locally.
 
+## 🛒 2. Scan and Search
+
+This simple demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/) to scan a product barcode and simulate a search from a product database.
+
+### ✨ Features
+
+- Scan Barcodes using your device camera
+- Search by Text or Barcode input
+- Displays mock product data as search results
+- Responsive UI with modern styling
+
+### 🔧 How It Works
+
+1. Click the Scan button to launch the barcode scanner.
+2. Once a barcode is detected, its value is displayed along with placeholder product information.
+3. Alternatively, type a product name or barcode manually in the input field and click Search.
+4. Results are displayed in the Search Result text area.
+
+### 📌 Notes
+
+- No real backend is connected in this demo; results are mocked.
+- You can integrate with a real product API by replacing the placeholder content in the searchResult.value.
+
 ## 📄 See other BarcodeScanner samples
 
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
@@ -48,4 +73,4 @@ barcodeScanner.launch();
 Scan multiple barcodes:
 
 * [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Scan multiple barcodes from video stream with minimum code in JavaScript.
-* [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart. 
+* [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart.