react-typeahead-tokenizer
Version:
React-based typeahead and typeahead-tokenizer
78 lines (71 loc) • 2.94 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>react-typeahead-tokenizer semantic-ui demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.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="ui container" style={{ marginTop: '50px' }}>
<div className="ui segment basic">
<h2>Typeahead</h2>
<Typeahead
className="ui floating dropdown input"
name="condiments-typeahead"
options={options}
placeholder="Pick your condiment"
customClasses={{
results: 'menu transition visible typeahead',
listItem: 'item',
typeahead: 'ui floating dropdown',
input: 'search'
}}
/>
</div>
<div className="ui segment basic" 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: 'menu transition visible typeahead',
listItem: 'item',
typeahead: 'ui input floating dropdown',
input: 'search'
}}
/>
</div>
</div>,
document.getElementById('app')
)
</script>
</body>
</html>