react-typeahead-tokenizer
Version:
React-based typeahead and typeahead-tokenizer
75 lines (68 loc) • 2.69 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>react-typeahead-tokenizer bootstrap demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<style>
.hover.item {
background: #ccc;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var exports = {};
var options = [
'salt',
'pepper',
'vinegar',
'ketchup',
'mustard'
];
</script>
<script src="../node_modules/react/dist/react-with-addons.min.js"></script>
<script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="../dist/react-typeahead.js"></script>
<script type="text/babel">
const { Typeahead, Tokenizer } = exports;
ReactDOM.render(
<div className="container" style={{ marginTop: '50px' }}>
<div className="container">
<h2>Typeahead</h2>
<Typeahead
className="dropdown open"
name="condiments-typeahead"
options={options}
placeholder="Pick your condiment"
customClasses={{
results: 'dropdown-menu'
}}
/>
</div>
<div className="container" style={{ marginTop: '50px' }}>
<h2>Tokenizer</h2>
<Tokenizer
name="condiments-tokenizer"
allowCustomValues={1}
inputProps={{
name: 'condiment-input',
autoComplete: 'off'
}}
options={options}
placeholder="Pick your condiment"
customClasses={{
results: 'dropdown-menu',
listItem: 'item',
token: 'tag label label-info',
typeahead: 'dropdown open'
}}
/>
</div>
</div>,
document.getElementById('app')
)
</script>
</body>
</html>