diff --git a/package.json b/package.json
index 1de41cb..2016db0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-datalist-input",
- "version": "1.1.19",
+ "version": "1.1.21",
"description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.",
"main": "./lib/DataListInput.js",
"license": "MIT",
diff --git a/src/DataListInput.jsx b/src/DataListInput.jsx
index 366d67a..9c56365 100644
--- a/src/DataListInput.jsx
+++ b/src/DataListInput.jsx
@@ -60,10 +60,14 @@ class DataListInput extends React.Component {
}
onClickInput = () => {
- const { currentInput, visible, matchingItems } = this.state;
- const { requiredInputLength, dropDownLength, items } = this.props;
+ const { currentInput, visible } = this.state;
+ const { requiredInputLength, dropDownLength, items, match } = this.props;
const reachedRequiredLength = currentInput.length >= requiredInputLength;
if ( reachedRequiredLength && !visible ) {
+ const matchingItems = items.filter( ( item ) => {
+ if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); }
+ return this.match( currentInput, item );
+ } );
const displayableItems = matchingItems.length
? matchingItems : items.slice( 0, dropDownLength )
this.setState( { visible: true, matchingItems: displayableItems, focusIndex: 0, } );
@@ -106,7 +110,7 @@ class DataListInput extends React.Component {
* @param item
* @returns {boolean}
*/
- match = ( currentInput, item ) => item.contains( currentInput) && item
+ match = ( currentInput, item ) => item
.label.substr( 0, currentInput.length ).toUpperCase() === currentInput.toUpperCase();
/**
@@ -204,13 +208,21 @@ class DataListInput extends React.Component {
onSelect( selectedItem );
};
+ renderMatchingLabel = ( currentInput, item ) => (
+
+ {item.label.substr( 0, this.indexOfMatch( currentInput, item ) ) }
+
+ { item.label.substr( this.indexOfMatch( currentInput, item ), currentInput.length ) }
+
+ { item.label.substr( this.indexOfMatch( currentInput, item ) + currentInput.length ) }
+
+ );
+
renderItemLabel = ( currentInput, item ) => (
- {item.label.substr( 0, this.indexOfMatch( currentInput, item ) )}
-
- {item.label.substr( this.indexOfMatch( currentInput, item ), currentInput.length )}
-
- {item.label.substr( this.indexOfMatch( currentInput, item ) + currentInput.length )}
+ { this.indexOfMatch( currentInput, item ) > 0
+ ? this.renderMatchingLabel( currentInput, item )
+ : item.label }
)