From 52933497858cac4d9df485480c132ff714281db3 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sat, 27 Apr 2019 20:14:44 -0700
Subject: [PATCH] Limit search input to first character matching when only one
 character is typed

---
 .../Page/Header/SeriesSearchInput.js          | 29 +++++++++++++++++--
 .../Page/Header/SeriesSearchInputConnector.js |  1 +
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Components/Page/Header/SeriesSearchInput.js b/frontend/src/Components/Page/Header/SeriesSearchInput.js
index d6cd8f55c..d04e3cc07 100644
--- a/frontend/src/Components/Page/Header/SeriesSearchInput.js
+++ b/frontend/src/Components/Page/Header/SeriesSearchInput.js
@@ -154,8 +154,33 @@ class SeriesSearchInput extends Component {
   }
 
   onSuggestionsFetchRequested = ({ value }) => {
-    const fuse = new Fuse(this.props.series, fuseOptions);
-    const suggestions = fuse.search(value);
+    const { series } = this.props;
+    let suggestions = [];
+
+    if (value.length === 1) {
+      suggestions = series.reduce((acc, s) => {
+        if (s.firstCharacter === value.toLowerCase()) {
+          acc.push({
+            item: s,
+            indices: [
+              [0, 0]
+            ],
+            matches: [
+              {
+                value: s.title,
+                key: 'title'
+              }
+            ],
+            arrayIndex: 0
+          });
+        }
+
+        return acc;
+      }, []);
+    } else {
+      const fuse = new Fuse(series, fuseOptions);
+      suggestions = fuse.search(value);
+    }
 
     this.setState({ suggestions });
   }
diff --git a/frontend/src/Components/Page/Header/SeriesSearchInputConnector.js b/frontend/src/Components/Page/Header/SeriesSearchInputConnector.js
index 604302318..fc679ae77 100644
--- a/frontend/src/Components/Page/Header/SeriesSearchInputConnector.js
+++ b/frontend/src/Components/Page/Header/SeriesSearchInputConnector.js
@@ -26,6 +26,7 @@ function createCleanSeriesSelector() {
           sortTitle,
           images,
           alternateTitles,
+          firstCharacter: title.charAt(0).toLowerCase(),
           tags: tags.map((id) => {
             return allTags.find((tag) => tag.id === id);
           })