From d0bba7e1e47e0b12c0e10f2cc302087ab447f604 Mon Sep 17 00:00:00 2001
From: Huss <huss@9fin.com>
Date: Wed, 8 Nov 2017 17:18:48 +0000
Subject: [PATCH] [added] optional custom function to compare input value to
 list option values

---
 README.md           | 13 +++++++++++++
 lib/Autocomplete.js | 17 ++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0f1753f9..15e84a9e 100644
--- a/README.md
+++ b/README.md
@@ -199,6 +199,19 @@ This is a shorthand for `wrapperProps={{ style: <your styles> }}`.
 Note that `wrapperStyle` is applied before `wrapperProps`, so the latter
 will win if it contains a `style` entry.
 
+#### `valueItemComparison: Function` (optional)
+Arguments: `optionItemValue: String, inputValue: String`
+Default value: 
+```jsx
+{
+  return (optionItemValue.toLowerCase().indexOf(
+        inputValue.toLowerCase()
+      ) === 0)
+}
+```
+
+The function which is used to compare the current input value to the currently highlighted item in the options list. Where by default the first item in the options list is compared to the input value. Returns a `Boolean`.
+
 
 ### Imperative API
 
diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js
index 202389d8..4fc30f0e 100644
--- a/lib/Autocomplete.js
+++ b/lib/Autocomplete.js
@@ -147,6 +147,14 @@ class Autocomplete extends React.Component {
      * UX/business logic. Use it together with `onMenuVisibilityChange` for
      * fine-grained control over the dropdown menu dynamics.
      */
+    valueItemComparison: PropTypes.func,
+    /**
+     * Arguments: `optionItemValue: String, inputValue: String`
+     *
+     * Defines the function used to compare the current input value to the
+     * currently highlighted item in the options list. Where by default the
+     * first item in the options list is compared to the input value.
+     */
     open: PropTypes.bool,
     debug: PropTypes.bool,
   }
@@ -179,6 +187,11 @@ class Autocomplete extends React.Component {
     autoHighlight: true,
     selectOnBlur: false,
     onMenuVisibilityChange() {},
+    valueItemComparison(optionItemValue, inputValue) {
+      return (optionItemValue.toLowerCase().indexOf(
+        inputValue.toLowerCase()
+      ) === 0)
+    }
   }
 
   constructor(props) {
@@ -373,9 +386,7 @@ class Autocomplete extends React.Component {
     const matchedItem = this.getFilteredItems(props)[index]
     if (value !== '' && matchedItem) {
       const itemValue = getItemValue(matchedItem)
-      const itemValueDoesMatch = (itemValue.toLowerCase().indexOf(
-        value.toLowerCase()
-      ) === 0)
+      const itemValueDoesMatch = this.props.valueItemComparison(itemValue, value)
       if (itemValueDoesMatch) {
         return { highlightedIndex: index }
       }