react-typeahead
Version:
React-based typeahead and typeahead-tokenizer
86 lines (69 loc) • 1.8 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-mobile-dark.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="../node_modules/react/dist/react-with-addons.js"></script>
<script src="../node_modules/react-dom/dist/react-dom.js"></script>
<script src="../dist/react-typeahead.js"></script>
</head>
<body>
<style>
#main {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
h1 {
color: #F0F1F1;
}
a {
color: #288EDF;
}
.topcoat-text-input {
width: 100%;
}
li.hover {
background: #585858;
}
.topcoat-addme::before {
content: 'Add me: '
}
.topcoat-addme {
text-align: right;
}
</style>
<div id="main">
<h1>Topcoat + React.Tokenizer</h1>
<div id="typeahead"></div>
</div>
<script type="text/babel">
(function(){
var req = new XMLHttpRequest();
req.open('GET', 'files.txt');
req.onload = function() {
if (req.status !== 200) {
throw new Error('nope');
}
ReactDOM.render(
<ReactTypeahead.Tokenizer
options={req.response.split('\n')}
allowCustomValues={4}
customClasses={{
typeahead: "topcoat-list",
input: "topcoat-text-input",
results: "topcoat-list__container",
listItem: "topcoat-list__item",
token: "topcoat-button",
customAdd: "topcoat-addme"
}} />,
document.getElementById("typeahead")
);
};
req.send();
})()
</script>
</body>
</html>