itzjonas/SearchFind.html

## SearchFind.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Search &amp; Find</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div id="app" />

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        const fruits = [
            'apple',
            'apricot',
            'banana',
            'blueberry',
            'cabbage',
            'coconut',
            'grapefruit',
            'guava',
            'mango',
            'peach',
            'pear',
            'pineapple',
            'tomato',
            'watermelon',
        ];

        // TODO refactor for lists with capitalization.
        class App extends React.Component {
            constructor(props) {
                super(props);

                this.state = { term: '' };
                this.funnel = this.funnel.bind(this);
            }

            funnel(e) {
                this.setState({
                    term: e.target.value.trim().toLowerCase(),
                });
            }

            render() {
                const { term } = this.state;
                const fruitFunnel = fruits.filter(fruit => fruit.includes(term));

                return (
                    <div className="container">
                        <div className="display-2">Search &amp; Find</div>
                        <div className="input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text">Search:</span>
                            </div>
                            <input onChange={this.funnel} className="form-control" placeholder="Apple" />
                        </div>
                        <div className="card">
                            <div className="card-body">
                                {
                                    fruitFunnel.map(fruit => {
                                        const start = fruit.indexOf(term);
                                        const stop = start + term.length;
                                        const pre = fruit.substring(0, start);
                                        const highlight = fruit.substring(start, stop);
                                        const post = fruit.substring(stop);

                                        return (<div className="lead">{pre}{highlight.length ? <mark>{highlight}</mark> : null}{post}</div>)
                                    })
                                }
                            </div>
                        </div>
                    </div>
                );
            }
        }

        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Search & Find</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	</head>
	<body>
	<div id="app" />

	<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
	const fruits = [
	'apple',
	'apricot',
	'banana',
	'blueberry',
	'cabbage',
	'coconut',
	'grapefruit',
	'guava',
	'mango',
	'peach',
	'pear',
	'pineapple',
	'tomato',
	'watermelon',
	];

	// TODO refactor for lists with capitalization.
	class App extends React.Component {
	constructor(props) {
	super(props);

	this.state = { term: '' };
	this.funnel = this.funnel.bind(this);
	}

	funnel(e) {
	this.setState({
	term: e.target.value.trim().toLowerCase(),
	});
	}

	render() {
	const { term } = this.state;
	const fruitFunnel = fruits.filter(fruit => fruit.includes(term));

	return (
	<div className="container">
	<div className="display-2">Search & Find</div>
	<div className="input-group mb-3">
	<div className="input-group-prepend">
	<span className="input-group-text">Search:</span>
	</div>
	<input onChange={this.funnel} className="form-control" placeholder="Apple" />
	</div>
	<div className="card">
	<div className="card-body">
	{
	fruitFunnel.map(fruit => {
	const start = fruit.indexOf(term);
	const stop = start + term.length;
	const pre = fruit.substring(0, start);
	const highlight = fruit.substring(start, stop);
	const post = fruit.substring(stop);

	return (<div className="lead">{pre}{highlight.length ? <mark>{highlight}</mark> : null}{post}</div>)
	})
	}
	</div>
	</div>
	</div>
	);
	}
	}

	ReactDOM.render(<App />, document.getElementById('app'));
	</script>
	</body>