Bloodhound maybe

In this example below you will see how to do a Bloodhound maybe with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by metamet, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright metamet ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bloodhound maybe</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/typeahead.js-bootstrap-css/1.2.1/typeaheadjs.css'>
<link rel='stylesheet prefetch' href='https://www.quietspeculation.com/wp-content/themes/quiet-speculation-2015-theme/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://www.quietspeculation.com/wp-content/themes/quiet-speculation-2015-theme/style.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/npm/keyrune@latest/css/keyrune.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="top-header">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<div class="title-area isFullOnly">
					<h1 itemprop="headline" style="margin: 0;"><a title="Homepage" href="//www.quietspeculation.com"><img src="//www.quietspeculation.com/wp-content/uploads/2017/08/qsv2-logo.png" class="image-no-shadow" style="margin-top: 20px;"></a>
					</h1>
				</div>
				<ul class="tabs group">
					<li><a href="#">Articles</a></li>
					<li><a href="#">Forums</a></li>
					<li><a href="#">Trader Tools</a></li>
					<li><a href="#">Account</a></li>
					<li><a href="#" id="search-toggle"><span class="toggle-open"><i class="material-icons" style="line-height: 90px;">search</i></span><span class="toggle-close" style="display: none;"><i class="material-icons" style="line-height: 90px;">close</i></span></a></li>
				</ul>
			</div>
			
		</div>
	</div>
</header>
<div class="context-header">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
<div class="context-menu-left" style="line-height: 2;">

            
			
			
		<span class="social-menu-right">
			<a href="//twitter.com/quietspec" class="context-menu-left-social"><span class="context-genericon genericon-twitter"></span></a>
<a href="/discord" class="context-menu-left-social" style="
    line-height: 50px;
    width: 100px;
    padding-top: 10px;
"><img src="//www.quietspeculation.com/wp-content/uploads/2017/08/Discord-LogoWordmark-White.png" style="box-shadow: none;"></a>
			<a href="//www.facebook.com/pages/Quiet-Speculation/117382391672739" class="context-menu-left-social"><span class="context-genericon genericon-facebook"></span></a>
			<a href="//www.youtube.com/user/QuietSpeculation" class="context-menu-left-social"><span class="context-genericon genericon-youtube"></span></a>
		</span>
		
        </div>
				<div class="context-menu-right" id="context-menu-right">

            <div id="context">
                <div class="context-tab-contents" style="display: block;" id="tradertools">
                    <ul class="context-menu">
                        <li class="isMobileOnly"><a href="//www.quietspeculation.com/tradertools/">Dashboard</a></li>
                        <li><a href="//www.quietspeculation.com/tradertools/prices">Price Research</a></li>
                        <li><a href="//www.quietspeculation.com/tradertools/collection">Collection</a></li>
                        <li><a href="//www.quietspeculation.com/tradertools/sell">Sell Cards</a></li>
                        <li><a href="//www.quietspeculation.com/tradertools/merchants">Merchants</a></li>
                        <li><a href="//www.quietspeculation.com/ioncore/">ION Scanner</a></li>
                        <li><a href="//www.quietspeculation.com/tradertools/settings">Settings</a></li>
                        <li><a href="//www.quietspeculation.com/tradertools/changelog"><i class="material-icons" style="font-size:11px;line-height: unset;">change_history</i></a></li>
                        
                    </ul>

                </div>
            </div>
        </div>
				<div id="scrollable-dropdown-menu" style="display: none;">
					<input class="typeahead" style="width: 200px;" placeholder="Start Typing a Card Name..."></input>
				</div>
			</div>
		</div>
	</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/metamet/bloodhound-maybe-zpvNyR */
input.typeahead {
  min-width: 400px;
  height: 50px;
  float: right;
  left: initial;
  right: 0;
  box-shadow: none;
  border-radius: 0;
  outline: none !important;
  padding-left: 15px;
}

input.typeahead.tt-hint {
  left: initial !important;
  right: 0;
  float: right;
}

span.twitter-typeahead .tt-menu,
span.twitter-typeahead .tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

span.twitter-typeahead .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #337ab7;
}

.input-group.input-group-lg span.twitter-typeahead .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.input-group.input-group-sm span.twitter-typeahead .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

span.twitter-typeahead {
  width: 100%;
}

.input-group span.twitter-typeahead {
  display: block !important;
  height: 34px;
  border-radius: 4px;
}

.input-group span.twitter-typeahead .tt-menu,
.input-group span.twitter-typeahead .tt-dropdown-menu {
  top: 32px !important;
}

.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
  border-radius: 0px;
}

.input-group span.twitter-typeahead:last-child .form-control {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.input-group.input-group-sm span.twitter-typeahead {
  height: 30px;
}

.input-group.input-group-sm span.twitter-typeahead .tt-menu,
.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
  top: 30px !important;
}

.input-group.input-group-lg span.twitter-typeahead {
  height: 46px;
}

.input-group.input-group-lg span.twitter-typeahead .tt-menu,
.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
  top: 46px !important;
}

.tt-menu.tt-open {
  width: 100%;
}

span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .tt-suggestion:hover, span.twitter-typeahead .tt-suggestion:focus {
  background-color: #7986cb;
}

span.twitter-typeahead .tt-suggestion.tt-cursor a, span.twitter-typeahead .tt-suggestion:hover a, span.twitter-typeahead .tt-suggestion:focus a {
  color: white;
}

.btn-buy {
  background-color: #4caf50;
  color: white;
}

.btn-spread {
  background-color: #7986cb;
  color: white;
}

.btn-retail {
  background-color: #29b6f6;
  color: white;
}

.top-header {
  min-height: 90px;
  height: 90px;
  padding-bottom: 3.2rem;
  background-color: #7986cb;
  color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.context-header {
  width: 100%;
  background: #3F51B5;
  color: #fff;
  line-height: 2;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  height: 50px;
}

#scrollable-dropdown-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 999;
}


/*Downloaded from https://www.codeseek.co/metamet/bloodhound-maybe-zpvNyR */
// Instantiate the Bloodhound suggestion engine
var cards = new Bloodhound({
	datumTokenizer: function (datum) {
		return Bloodhound.tokenizers.whitespace(datum.card_name);
	},
	queryTokenizer: Bloodhound.tokenizers.whitespace,
	remote: {
		url: 'https://api.quietspeculation.com/v1/cards/%QUERY/auto',
		wildcard: '%QUERY',
		filter: function (cards) {
			// Map the remote source JSON array to a JavaScript object array
			return $.map(cards, function (card) {
				return {
					card_name: card.card_name,
					set_name: card.set_name,
					set_code: card.set_code.toLowerCase(),
					rarity: card.rarity.toLowerCase(),
					foil: (card.foil == 1) ? '(Foil)' : '',
					foilPath: (card.foil == 1) ? '/foil' : '',					
					spread_best_pct: Math.round(card.spread_best_pct),
					spread_best_usd: (card.spread_best_usd) ? '$' + card.spread_best_usd : 'N/A',
					buy_best: (card.buy_best) ? '$' + card.buy_best : 'N/A',
					retail_best: (card.retail_best) ? '$' + card.retail_best : 'N/A',
				};
			});
		}
	},
	limit: 10
});

// Initialize the Bloodhound suggestion engine
cards.initialize();

// Instantiate the Typeahead UI
$('#scrollable-dropdown-menu .typeahead').typeahead(null, {
	displayKey: 'card_name',
	source: cards.ttAdapter(),
	templates: {
		suggestion: Handlebars.compile("<div class='row'><div class='col-xs-4'><a href='//www.quietspeculation.com/tradertools/prices/sets/{{set_name}}/{{card_name}}{{foilPath}}'><i class='ss ss-{{set_code}} ss-fw ss-{{rarity}}'></i> <b>{{card_name}}</b> {{foil}} </a></div> <div class='col-xs-4'><a href='//www.quietspeculation.com/tradertools/prices/sets/{{set_name}}{{foilPath}}'>{{set_name}} {{foil}}</a> </div><div class='col-xs-4 text-center'><div class='btn-group' role='group' aria-label='Basic example'><a href='//www.quietspeculation.com/tradertools/prices/sets/{{set_name}}/{{card_name}}{{foilPath}}' class='btn btn-buy'>{{buy_best}}</a><a href='//www.quietspeculation.com/tradertools/prices/sets/{{set_name}}/{{card_name}}{{foilPath}}' class='btn btn-spread'>{{spread_best_usd}}</a><a href='//www.quietspeculation.com/tradertools/prices/sets/{{set_name}}/{{card_name}}{{foilPath}}' class='btn btn-spread'>{{spread_best_pct}}%</a><a href='//www.quietspeculation.com/tradertools/prices/sets/{{set_name}}/{{card_name}}{{foilPath}}' class='btn btn-retail'>{{retail_best}}</a></div></div></div>")
	}
});

$("#search-toggle").click(function() {
	$(this).toggleClass("active");
	$("#search-toggle span.toggle-open").toggle();
	$("#search-toggle span.toggle-close").toggle();
	$("#scrollable-dropdown-menu").toggle(200);
});

Comments