tag/typeahead_example.html

## typeahead_example.html
<!doctype html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

    <style type="text/css">
    /* These class names can me specified in the Typeahead options hash. I use the defaults here. */
    .tt-suggestion {
        border: 1px dotted gray;
        padding: 4px;
        min-width: 100px;
    }
    .tt-cursor {
        background-color: rgb(255,253,189);
    }

    /* These classes are used in the suggestion template */
    .itemStageName {
        font-size: 110%;
    }
    .itemLegalName {
        font-size: 110%;
        color: rgb(51,42,206);
    }
    </style>
</head>
<body>

<p>Type something here. A good search term might be 'C'.</p>
<div id="prefetch">
  <input class="typeahead" type="text" placeholder="Name">
</div>

<script type="text/javascript">
var actors = new Bloodhound({
  // Each row is an object, not a single string, so we have to modify the
  // default datum tokenizer. Pass in the list of object fields to be
  // searchable.
  datumTokenizer: Bloodhound.tokenizers.obj.nonword(
    'StageName','AKA1','AKA2','LegalName','SoundEx'
  ),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // URL points to a json file that contains an array of actor JSON objects
  // Visit the link to see details
  prefetch: 'https://gist.githubusercontent.com/tag/81e4450de8eca805f436b72e6d7d1274/raw/792b3376f63f89d86e10e78d387109f0ad7903fd/dummy_actors.json'
});

// passing in `null` for the `options` arguments will result in the default
// options being used
$('#prefetch .typeahead').typeahead(
    {
        highlight: true
    }, {
    name: 'actors',
    source: actors,
    templates: {
        empty: "<div class=\"empty-message\">No matches found.</div>",

        // This is simply a function that accepts an object.
        // You may wish to consider Handlebars instead.
        suggestion: function(obj) {
            return '<div class="actorItem">'
                + '<span class="itemStageName">'+obj.StageName+"</span>"
                + ', <em>legally</em> <span class="itemLegalName">'+obj.LegalName+"</span>"
        }
        //suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
      },
      display: "LegalName" // name of object key to display when selected
      // Instead of display, you can use the 'displayKey' option too:
      // displayKey: function(actor) {
      //     return actor.LegalName;
      // }
});
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

	<style type="text/css">
	/* These class names can me specified in the Typeahead options hash. I use the defaults here. */
	.tt-suggestion {
	border: 1px dotted gray;
	padding: 4px;
	min-width: 100px;
	}
	.tt-cursor {
	background-color: rgb(255,253,189);
	}

	/* These classes are used in the suggestion template */
	.itemStageName {
	font-size: 110%;
	}
	.itemLegalName {
	font-size: 110%;
	color: rgb(51,42,206);
	}
	</style>
	</head>
	<body>

	<p>Type something here. A good search term might be 'C'.</p>
	<div id="prefetch">
	<input class="typeahead" type="text" placeholder="Name">
	</div>

	<script type="text/javascript">
	var actors = new Bloodhound({
	// Each row is an object, not a single string, so we have to modify the
	// default datum tokenizer. Pass in the list of object fields to be
	// searchable.
	datumTokenizer: Bloodhound.tokenizers.obj.nonword(
	'StageName','AKA1','AKA2','LegalName','SoundEx'
	),
	queryTokenizer: Bloodhound.tokenizers.whitespace,
	// URL points to a json file that contains an array of actor JSON objects
	// Visit the link to see details
	prefetch: 'https://gist.githubusercontent.com/tag/81e4450de8eca805f436b72e6d7d1274/raw/792b3376f63f89d86e10e78d387109f0ad7903fd/dummy_actors.json'
	});

	// passing in `null` for the `options` arguments will result in the default
	// options being used
	$('#prefetch .typeahead').typeahead(
	{
	highlight: true
	}, {
	name: 'actors',
	source: actors,
	templates: {
	empty: "<div class=\"empty-message\">No matches found.</div>",

	// This is simply a function that accepts an object.
	// You may wish to consider Handlebars instead.
	suggestion: function(obj) {
	return '<div class="actorItem">'
	+ '<span class="itemStageName">'+obj.StageName+"</span>"
	+ ', <em>legally</em> <span class="itemLegalName">'+obj.LegalName+"</span>"
	}
	//suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
	},
	display: "LegalName" // name of object key to display when selected
	// Instead of display, you can use the 'displayKey' option too:
	// displayKey: function(actor) {
	// return actor.LegalName;
	// }
	});
	</script>
	</body>
	</html>