react-typeahead
Version:
React-based typeahead and typeahead-tokenizer
95 lines (76 loc) • 1.94 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="../node_modules/react/dist/react-with-addons.js"></script>
<script src="../node_modules/react/dist/JSXTransformer.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%;
}
.topcoat-active {
background: #585858;
}
.topcoat-addme::before {
content: 'Add me: '
}
.topcoat-addme {
text-align: right;
}
</style>
<div id="main">
<h1>Topcoat + React.Typeahead</h1>
<div id="typeahead"></div>
</div>
<script type="text/jsx">
/** @jsx React.DOM */
(function(){
var req = new XMLHttpRequest();
req.open('GET', 'files.txt');
req.onload = function() {
if (req.status !== 200) {
throw new Error('nope');
}
var optionSelected = function() {
console.log("Option was selected: " , arguments);
}
React.render(
<ReactTypeahead.Typeahead
name="myTypeahead"
allowCustomValues={3}
defaultValue="src"
options={req.response.split('\n')}
className="topcoat-list"
maxVisible={3}
onOptionSelected={optionSelected}
customClasses={{
input: "topcoat-text-input",
results: "topcoat-list__container",
listItem: "topcoat-list__item",
hover: "topcoat-active",
customAdd: "topcoat-addme"
}} />,
document.getElementById("typeahead")
);
};
req.send();
})()
</script>
</body>
</html>