mirror of
https://github.com/danog/react-datalist-input.git
synced 2024-12-04 02:17:50 +01:00
107 lines
3.6 KiB
Markdown
107 lines
3.6 KiB
Markdown
## Info
|
|
|
|
This package provides an input field with a drop-down menu react component.
|
|
|
|
The component contains an input field with a drop down menu to pick a possible option based on the current input as a react component.
|
|
|
|
Have a look at [w3schools.com](https://www.w3schools.com/howto/howto_js_autocomplete.asp) to see how you can do the same thing with pure html, css, and js.
|
|
|
|
For more information about react and the ecosystem see this [guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
|
|
|
## Check it out yourself
|
|
|
|
Have a look at this [demo app](https://stark-retreat-79786.herokuapp.com/) using the react-datalist-input component.
|
|
<br>It is running free on heroku, so sorry if it is down already.
|
|
|
|
## Feedback
|
|
Feel free to get inspired and more importantly provide [your feedback](https://github.com/andrelandgraf/react-datalist-input/issues) on structure and style. I'm more than happy to learn how to improve my code and architecture.
|
|
|
|
## Installation
|
|
|
|
**Install node dependencies**
|
|
|
|
```
|
|
npm install react-datalist-input --save
|
|
```
|
|
|
|
***Basic Usage***
|
|
|
|
```
|
|
import DataListInput from 'react-datalist-input';
|
|
|
|
// create your own match algorithm if you want to
|
|
matchCurrentInput = (currentInput, item) => {
|
|
const key = item.someAdditionalValue;
|
|
return (key.substr(0, currentInput.length).toUpperCase() === currentInput.toUpperCase());
|
|
|
|
};
|
|
|
|
// callback function
|
|
// gets called if the user selects one option out of the drop down menu
|
|
onSelect = (selectedKey) => {
|
|
if (this.props.currentSymbol !== selectedKey)
|
|
this.props.onChangeSymbol(selectedKey);
|
|
};
|
|
|
|
render() {
|
|
// the array you want to pass to the react-data-list component
|
|
// each element needs a key (id) and a label (what to show to the user)
|
|
const items = this.props.values.map((item, i) => {
|
|
return {
|
|
label: item.id + ": " + item.name,
|
|
key: item.id,
|
|
someAdditionalValue: item.someAdditionalValue,
|
|
}
|
|
});
|
|
|
|
return(
|
|
<div>
|
|
<DataListInput placeholder={"Select an option from the drop down menu..."}
|
|
items={items} onSelect={this.onSelect} match={this.matchCurrentInput}/>
|
|
</div>
|
|
);
|
|
```
|
|
|
|
## Properties
|
|
|
|
***items***
|
|
|
|
- <b>Required</b> property!
|
|
- The array of options for the drop down menu.<br>
|
|
- Every item inside the array needs to have following properties:
|
|
- key : an id that identifies the item within the array
|
|
- label: the label that will be shown in the drop down menu
|
|
|
|
***onSelect***
|
|
|
|
- <b>Required</b> property!
|
|
- The callback function that will be called if the user selects one item of the drop down menu.
|
|
- Gets only called if the item changes. Selecting the same item twice will only trigger the function once (the first time).
|
|
- Parameter: (selectedKey)
|
|
- selectedKey: the Key Property of the item that the user selected
|
|
|
|
***match***
|
|
|
|
- Pass a match function as stated above for creating your own matching algorithm for the autocomplete functionality.
|
|
- Parameter: (currentInput, item)
|
|
- currentInput: String, the current user input typed into the input field
|
|
- item: Object, the item of the items array (with key and label properties)
|
|
|
|
- Default:
|
|
```
|
|
/**
|
|
* default function for matching the current input value (needle) and the values of the items array
|
|
* @param currentInput
|
|
* @param item
|
|
* @returns {boolean}
|
|
*/
|
|
match = (currentInput, item) => {
|
|
return item.label.substr(0, currentInput.length).toUpperCase() === currentInput.toUpperCase();
|
|
};
|
|
```
|
|
|
|
***placeholder***
|
|
|
|
- The placeholder that will be shown inside the input field.
|
|
|
|
|