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: }}`. 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 } }