Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

[added] optional custom function to compare input value to list option values #294

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

17 changes: 14 additions & 3 deletions lib/Autocomplete.js
Original file line number Diff line number Diff line change
@@ -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 }
}