JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js"></script>
<link rel="stylesheet" href="http://lab.ritaco.net/webfonts/css/fonts.css">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">title</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">home</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
            </div><!--.nav-collapse -->
        </div>
    </nav>
<br/>
<div class="container">
        <form>
            <div class="row">

                <div class="col-xs-2">
                    <div class="form-group">
                        <label>price</label>
                        <input id="price" type="text" class="form-control hasclear" />
                    </div>
                </div>

                <div class="col-xs-2 col-xs-offset-1">
                    <div class="form-group">
                        <label for="symbol">state</label>
                        <input id="symbol" type="text" class="form-control hasclear"  placeholder="state" />
                    </div>
                </div>

                <div class="col-xs-2 col-xs-offset-1">
                    <div class="form-group">
                        <label for="quantity">some foo</label>
                        <input type="text"...

CSS

Skip to content
 
Search or jump to…

Pull requests
Issues
Marketplace
Explore
 @silvia-king
Sign out
 Watch 627
 Star 15,327  Fork 3,240 twitter/typeahead.js
 Code  Issues 372  Pull requests 104  Insights
Branch: gh-pages Find file Copy path typeahead.js/css/examples.css
ae05357  on 28 Apr 2015
@jharding jharding Set cursor to pointer on suggestion hover
2 contributors @jharding @timtrueman
RawBlameHistory     
172 lines (138 sloc)  2.5 KB
/* scaffolding */
/* ----------- */

html {
  overflow-y: scroll;
  *overflow-x: hidden;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.tt-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */

html {
  font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  color: #292f33;
}


a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

p + p {
  margin: 30px 0 0 0;
}

/* site theme */
/* ---------- */

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color:...

JavaScript

var substringMatcher = function (strs) {
            return function findMatches(q, cb) {
                var matches, substrRegex;

                // an array that will be populated with substring matches
                matches = [];

                // regex used to determine if a string contains the substring `q`
                substrRegex = new RegExp(q, 'i');

                // iterate through the pool of strings and for any string that
                // contains the substring `q`, add it to the `matches` array
                $.each(strs, function (i, str) {
                    if (substrRegex.test(str)) {
                        // the typeahead jQuery plugin expects suggestions to a
                        // JavaScript object, refer to typeahead docs for more info
                        matches.push({ value: str });
                    }
                });

                cb(matches);
            };
        };

        var states = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"];

        $('#symbol').typeahead({
            hint: true,
            highlight: true,
            minLength: 2
        },
        {
            name: 'states',
            displayKey: 'value',
            source: substringMatcher(states)
        });