About this article
This article was created using an automated generation workflow powered by generative AI. Official Fuse.js search options were cross-referenced with code for five dummy books stored on GitHub. We distinguish between exact title matching and candidate searches that allow for partial strings and typos. Actual browser behavior has not been verified.Verification Status: Based on reviews prior to 2026-10-30, official documentation and fixed sources of stored Daily Code were cross-referenced, and Node.js syntax check results are recorded. Actual browser operations, rendering, and CDN responses remain unverified. UI descriptions represent expected values derived from the code and are distinguished from empirical measurements.
| Item | Details |
|---|---|
| Target | Modern browsers such as Chrome, Edge, and Firefox (actual device compatibility unverified) |
| Library Used | Fuse.js (version in tutorial: 7.5.0) |
| Cost | No paid API required for the demo source itself. Communication fees and terms of use depend on the environment. |
| Data | Dummy data within the page. No authentication credentials, location data, or corporate data required. |
| Learning Objective | Search for book titles and observe the ranking of close candidates |
- Why test this technology?
- Try First: Correct Files and Operation Procedure
- How it works: Understanding the API
- Change only one condition at a time to compare
- What to check when a failure occurs
- Application to Business and Learning
- Comparing with Alternative Methods
- GitHub Sample
- Official and Primary Sources
- Supplementary Information on Verification Scope
Why test this technology?
If a search returns zero results simply due to minor spelling variations, users cannot reach the registered information. Fuse.js is a JavaScript library that performs client-side fuzzy search. It is well-suited for finding candidates in small-scale datasets such as book titles, readings, and genres. The book dataset used here consists of only five dummy records. We will observe which candidates are suggested when partial characters are entered into the search box, and how this differs from exact match search. Finding candidates through search and verifying whether those candidates are the correct target should be considered separately.
When creating a working sample, rather than just confirming that the UI animates or changes, you need to distinguish which input modified which variable and which process updated the rendering. In this tutorial, we explicitly show these changes on the screen. When integrating into an actual service, please design authentication and persistence processes separately.
Try First: Correct Files and Operation Procedure
The README for this tutorial is located in web/fusejs-book-search/README.md, and the executable file is in another docs/demos/fusejs-book-search/. If you assume they are in the same folder and look for index.html from the README side, you will not find it. Please refer to the pinned commit verified on 2026-10-28.
Running on a PC (Independent of Public Demos)
Save the above
index.htmlandapp.jsto the same new folder. Do not save the GitHub HTML view as-is; save the text from the Raw view of each file.Open a terminal in that folder and check if Python 3 is available. For Windows, use
py -3 --version, and for Linux/macOS, usepython3 --version. If Python is not installed, do not force an installation; instead, choose a method available in your existing development environment to serve static files.Windows runs
py -3 -m http.server 8000 --bind 127.0.0.1, and Linux/macOS runspython3 -m http.server 8000 --bind 127.0.0.1. This specifies access from the local terminal only.Open
http://127.0.0.1:8000/in your browser. Do not close the launched terminal; pressCtrl+Cwhen finishing. If external CDNs are prohibited on your company PC, cancel the execution and check the regulations.
Expected screen: The initial search field value is JavaScrip, the threshold slider is 0.3, the search results are sorted in <ul>, and the status display below is SUCCESS: ○件 / 閾値 0.3. The number of items and rankings are unmeasured in the actual browser. Even if the status display is SUCCESS, separately verify that the candidate names are actually visible.
Observe the difference between exact match and fuzzy search
The book data contains 5 entries of JavaScript入門、マンガの描き方、ジャバスクリプト実験、地図を作る、図解Web技術.
For an exact match of the entire title：
book.title === 'JavaScrip', the match count is 0 items. This is a definitive result obtained by comparing the five character strings in code, not a result from Fuse.js.Candidate search using Fuse.js: In the search field for
JavaScrip, check in an actual browser whetherJavaScript入門becomes a candidate. Partial matching from the beginning and missing characters can be handled, but the results vary depending on the threshold and position settings.Setting the slider to 0：
threshold: 0is not an exact match mode for the entire title. If the search term is included as-is at the beginning of the title, a hit may occur even if the entire title differs. For strict title identification, use===or unique ID matching.Clearing the search field: The implementation displays a list of 5 items without searching. The expected value in the code is
SUCCESS: 5件 / 閾値 0.3(when the slider is reset).Japanese reading errors: This is not a feature that automatically treats
JavaScriptin romaji andジャバスクリプトin katakana as identical.
If Fuse is not defined appears in the developer tools console, check the CDN loading order and communication; if 404 appears, check the storage location of app.js. If the display is empty but the console is normal, revert the input string and threshold one by one. Priority is given to preventing users from making erroneous selections over the number of results.
Overview of the Mechanism
flowchart LR
A["入力やクリック"] --> B["イベントを受ける"]
B --> C["Fuse.js のAPI"]
C --> D["状態と描画を更新"]
D --> E["見た目と文字で確認"]
This diagram is a conceptual illustration for learning purposes and does not represent the internal implementation of the browser or the details of network communication. It is common for libraries to trace whatever 'which variable the operation reaches'.
How it works: Understanding the API
The array passed to Fuse is the search target,keys are the fields to match against.threshold adjusts how strictly candidates are matched, where a value closer to 0 is stricter.includeScore obtained via score isa score where smaller means closer, though it is neither the probability of a correct match nor a simple edit distance. In the actual sample screen, it is displayed as "distance" for convenience, but strictly speaking, it is the Fuse.js score. This label is scheduled for future display improvements on the Daily Code side. It should not be used for use cases where users automatically confirm selections without checking candidate names. For details, refer tothe official Fuzzy Search threshold, location, and distance documentation andthe Getting Started score explanation.
How to read the minimal code
const fuse = new Fuse(books, { keys: ["title"], includeScore: true, threshold: 0.3 });
const results = fuse.search("JavaScrip");
// scoreは正解の確率ではない
The above is an excerpt highlighting the key points of the API. It is not a complete file that can be copied and run standalone.Check the README and demo files on the Daily Code side for the complete HTML and implementation required to run it. Trace which functions select HTML elements and which lines update numerical values, and test them with known dummy values.
Change only one condition at a time to compare
The parameters that can actually be changed in this demo arethe search string and the threshold slider. First, JavaScrip with entered, move the slider in the order of 0.3 → 0 → 0.7 → 0.3. At each stage, record SUCCESS: ○件 / 閾値 ○ along with the candidate names and ranks.Actual measurement of the number of items has not been performed, so a table guaranteeing increases or decreases is not published. Even if the candidates do not change, a short search term may match the beginning of the string.
To develop the implementation further, you can add keys: ['title'] or author to genre. However, the current five items do not have those fields. Since simply increasing the keys without search target data would make comparison impossible, adding fields is treated as a separate experiment. When verifying the difference from exact match, compare the count of books.filter(b => b.title === query) and the count of Fuse.js search(query) separately.
What to check when a failure occurs
Full-width and half-width characters, katakana and hiragana, kanji readings, and voiced and unvoiced sounds in Japanese cannot be fully handled by simple fuzzy matching alone. If necessary, provide phonetic readings or alternative names on the data side and prepare a normalized field separately. Furthermore, if the search targets increase to hundreds of thousands of items, transferring all data to the browser becomes heavy and risks exposing information to unauthorized users. Determine the threshold for switching to server-side search.
| Observed state | Points to isolate | Example action |
|---|---|---|
| Screen does not change from the initial state | Script acquisition, initialization, and event registration | Check Console, Network, and script tags |
| Display changes but the meaning does not match | Input values, arrays, units, and update targets | Fix values and verify conditions one by one |
| Unchanged even when moving search boxes or sliders | #q/#v input event, script retrieval | Check console errors, HTML IDs, and app.js loading order |
| Fails on specific devices only | Browser features, permissions, CDN, performance | Record the device and version, and the reproduction steps |
In-browser errors and public web server failures are distinct. The former should be investigated using developer tool error details, while the latter should be checked through HTTP responses and asset delivery conditions. Refraining from labeling unknown failures as successes enhances the reliability of technical notes.
Application to Business and Learning
This can be used for internal glossaries, component name suggestion displays, event name searches, and FAQ navigation. However, for use cases where misselection has a significant impact, such as drug names or settlement counterparty selection, the suggestion display and confirmation actions must be separated, and verification using official identifiers is required. Even when making searches more convenient, it is important not to delegate identification and approval responsibilities to the search library.
Decisions to Make Before Implementation
When publishing to readers, determine where the displayed data comes from, who can modify it, the types of information retained on the screen, and the verification items for library updates. The current demo includes neither login nor server persistence. Therefore, before adding operational features, we recommend first distinguishing between the "minimum functional part that displays as expected" and the "part requiring operational reliability, permissions, and backups." Since third-party CDNs involve external communication, prior confirmation is required to ensure they are permitted on corporate networks.
Comparing with Alternative Methods
| Method | Suitable Scenarios | Precautions |
|---|---|---|
| Fuse.js | Scenarios matching purposes such as searching book titles and viewing ranked close matches | Requires management of dependency library updates and terms of use |
| Browser Standard API | Build small features from scratch | Verify specifications and compatibility independently |
| Static images and tables | Explanations requiring no interaction | State changes cannot be experienced in real time |
Libraries are tools to be chosen when needed. Compare what you want to achieve against the learning curve. Avoiding the goal of simply "adding a library" makes small pages easier to maintain.
GitHub Sample
The blog text covers the background and concepts, while Daily Code provides code to run and modify. APIs for posting and saving to external services are not included.
Official and Primary Sources
Reviewed Documentation Scope: Re-verified official Getting Started and Fuzzy Search on 2026-10-30. The old /api/options.html resulted in a 404, so it was updated to the current page. Actual CDN communication and browser rendering have not been verified.
Supplementary Information on Verification Scope
You can reference the fixed commit of Daily Code and existing Node.js syntax inspection results. However, actual browser rendering, library CDN response, and operation on all devices are unverified. Please verify actual behavior in your own environment using the Console and Network tabs.
