JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/twitter/typeahead.js/master/dist/typeahead.js"></script>
<script src="https://rawgithub.com/RactiveJS/Ractive/master/release/0.3.8/Ractive.js"></script>
<h1>Select a county of the UK</h1>
<div id='container'></div>
CSS
body {
font-family: 'Arial';
color: #353535;
}
.tt-dropdown-menu {
border: 1px solid #eee;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.tt-suggestion p {
padding: 0.5em;
margin: 0;
}
.tt-is-under-cursor {
background-color: #eee;
}
JavaScript
var counties = [ "Avon", "Bedfordshire", "Berkshire", "City of Bristol", "Buckinghamshire", "Cambridgeshire", "Cheshire", "Cleveland", "Cornwall", "Cumberland", "Cumbria", "Derbyshire", "Devon", "Dorset", "Durham", "East Suffolk", "East Sussex", "Essex", "Gloucestershire", "Greater London", "Greater Manchester", "Hampshire (County of Southampton)", "Hereford and Worcester", "Herefordshire", "Hertfordshire", "Humberside", "Huntingdon and Peterborough", "Huntingdonshire", "Isle of Ely", "Isle of Wight", "Kent", "Lancashire", "Leicestershire", "Lincolnshire", "London", "City of London", "Merseyside", "Middlesex", "Norfolk", "Northamptonshire", "Northumberland", "North Humberside", "North Yorkshire", "Nottinghamshire", "Oxfordshire", "Soke of Peterborough", "Rutland", "Shropshire", "Somerset", "South Humberside", "South Yorkshire", "Staffordshire", "Suffolk", "Surrey", "Sussex", "Tyne and Wear", "Warwickshire", "West Midlands", "Westmorland", "West Suffolk", "West Sussex", "West Yorkshire", "Wiltshire", "Worcestershire", "Yorkshire" ];
var ractive = new Ractive({
el: 'container',
template: '<input type="text" decorator="typeahead">',
decorators: {
typeahead: function (node) {
$(node).typeahead({
local: counties
});
return {
teardown: function () {
$(node).typehead('destroy');
}
};
}
}
});