jquery-typeahead
Version:
jQuery plugin that provides Typeahead (autocomplete) Search preview from Json object(s) via same domain Ajax request or cross domain Jsonp and offers data compression inside Local Storage. The plugin is built with a lot of options and callbacks to allow c
203 lines (180 loc) • 7.36 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../src/jquery.typeahead.css">
<link rel="stylesheet" href="demo-backdrop_v1.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<!--script src="../dist/jquery.typeahead.min.js"></script-->
<script src="../../src/jquery.typeahead.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:;" class="js-typeahead-toggle"><i class="fa fa-search"></i></a></li>
</ul>
<form>
<div class="typeahead__container">
<div class="typeahead__header">
<div class="typeahead__field">
<div class="typeahead__backdrop-search-icon js-typeahead-submit">
<i class="fa fa-search"></i>
</div>
<div class="typeahead__query">
<input class="js-typeahead"
name="q"
autocomplete="off">
</div>
<div class="typeahead__close">
<i class="fa fa-times"></i>
<div class="typeahead__esc">[ESC]</div>
</div>
</div>
</div>
<div class="typeahead__result-count js-typeahead-result-count">Search for Scenes, Models or Tags
</div>
</div>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Backdrop_v1 Demo</h1>
<p>
<a class="btn btn-lg btn-primary"
href="http://jsfiddle.net/runningcoder/xd0q4co1/"
role="button">Edit this demo on JsFiddle »</a>
</p>
</div>
</div>
<script>
var typeaheadResultCount = $('.js-typeahead-result-count'),
typeaheadResultCountDefault = typeaheadResultCount.text(),
typeaheadToggle = $('.js-typeahead-toggle'),
typeaheadSubmit = $('.js-typeahead-submit');
typeaheadToggle.on('click', function (e) {
$('.js-typeahead').focus();
// Prevent Typeahead hideLayout from being called on the initial request
e.stopPropagation();
});
typeaheadSubmit.on('click', function (e) {
var origin = $(e.currentTarget);
if (!origin.hasClass('active')) return;
origin.closest('form')[0].submit();
});
typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead",
minLength: 2,
maxItem: 40,
order: "asc",
hint: true,
backdrop: {
opacity: 1,
background: '#fff'
},
maxItemPerGroup: 30,
backdropOnFocus: true,
cancelButton: false,
emptyTemplate: function (query) {
return 'no result for ' + query;
},
source: {
game: {
href: "http://www.gamer-hub.com/game/{{id}}/{{display|slugify}}",
template: function (query, item) {
return '<div><img src="http://cdn.gamer-hub.com/images/' + this.helper.slugify.call(this, item.display) + '.jpg"></div>'
},
ajax: {
url: "http://www.gamer-hub.com/game/list.json",
dataType: "jsonp",
path: "data"
}
},
category: {
href: "http://www.gamer-hub.com/category/{{id}}/{{display|slugify}}",
ajax: {
url: "http://www.gamer-hub.com/category/list.json",
dataType: "jsonp",
path: "data"
}
},
tag: {
href: "http://www.gamer-hub.com/tag/{{id}}/{{display|slugify}}",
ajax: {
url: "http://www.gamer-hub.com/tag/list.json",
dataType: "jsonp",
path: "data"
}
}
},
callback: {
onSearch: function (node, query) {
if (query.length < this.options.minLength) {
typeaheadResultCount.text(typeaheadResultCountDefault);
}
typeaheadSubmit.toggleClass('active', !!query.length)
},
onResult: function (node, query, result, resultCount, resultCountPerGroup) {
var group,
text = '';
if (result.length) {
for (group in resultCountPerGroup) {
if (resultCountPerGroup[group] > 0) {
text += resultCountPerGroup[group] + ' ' + group + (resultCountPerGroup[group] > 1 ? 's' : '')
}
}
}
typeaheadResultCount.text(text || typeaheadResultCountDefault);
},
onShowLayout: function (node, query) {
$('html').css('overflow', 'hidden');
var scope = this;
node.closest('form').find('.typeahead__close').on('click touchend', function (e) {
scope.hideLayout();
});
},
onHideLayout: function (node, query) {
$('html').removeAttr('style');
},
onNavigateBefore: function (node, query, event) {
if (event.keyCode === 13) {
var form = node.closest('form');
if (!form.find('.typeahead__item.active')[0]) {
form[0].submit();
}
}
},
onSubmit: function (node, form, item, event) {
if (!this.query.length) {
node.focus();
}
return !!this.query.length;
}
}
});
</script>
</body>
</html>