react-typeahead
Version:
React-based typeahead and typeahead-tokenizer
99 lines (83 loc) • 1.93 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%;
}
li.hover {
background: #585858;
}
</style>
<div id="main">
<h1>Topcoat + React.Typeahead (custom options)</h1>
<div id="typeahead"></div>
</div>
<script type="text/jsx">
/** @jsx React.DOM */
var options = [
{
firstName: 'John',
lastName: 'Lennon',
birthYear: 1940
},
{
firstName: 'Paul',
lastName: 'McCartney',
birthYear: 1942
},
{
firstName: 'George',
lastName: 'Harrison',
birthYear: 1943
},
{
firstName: 'Ringo',
lastName: 'Starr',
birthYear: 1940
}
].map(function(option) {
option.fullName = option.firstName + ' ' + option.lastName;
return option;
});
var displayOption = function(option) {
return option.firstName + " (" + option.birthYear + ")";
};
window.onload = function() {
React.render(
<ReactTypeahead.Typeahead
defaultValue="a"
options={options}
filterOption='fullName'
displayOption={ displayOption }
className="topcoat-list"
customClasses={{
input: "topcoat-text-input",
results: "topcoat-list__container",
listItem: "topcoat-list__item"
}} />,
document.getElementById("typeahead")
);
};
</script>
</body>
</html>