react-datalist-input

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 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.

Check it out yourself

Have a look at this demo app using the react-datalist-input component.
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 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

• Required property!
• The array of options for the drop down menu.
  
• 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

• Required 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.