Typeahead JS - Twitter.Typeahead - Basic Example
Problem Definition
Use typeahead.js - Twitter.Typeahead to implement type ahead functionality
Installation
Use nuget package manager to find "Twitter.Typeahead"
Body Code
<body>
<form>
<div class="form-group">
<label for="nhl">Pick your team: </label>
<input type="text" class="form-control" id="nhl" placeholder="Calgary Flames" ">
</div>
</form>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/typeahead.jquery.min.js"></script>
<script>
var substringMatcher = function (strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// 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)) {
matches.push(str);
}
});
cb(matches);
};
};
var teams = ['Calgary Flames', 'Edmonton Oilers', 'Montreal Canadiens', 'Ottawa Senators', 'Toronto Maple Leafs', 'Vancouver Canucks', 'Winnipeg Jets'];
$('#nhl').typeahead({
hint: true,
highlight: true,
minLength: 1,
}
,
{
name: 'teams',
source: substringMatcher(teams)
});
</script>
</body>
<form>
<div class="form-group">
<label for="nhl">Pick your team: </label>
<input type="text" class="form-control" id="nhl" placeholder="Calgary Flames" ">
</div>
</form>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/typeahead.jquery.min.js"></script>
<script>
var substringMatcher = function (strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// 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)) {
matches.push(str);
}
});
cb(matches);
};
};
var teams = ['Calgary Flames', 'Edmonton Oilers', 'Montreal Canadiens', 'Ottawa Senators', 'Toronto Maple Leafs', 'Vancouver Canucks', 'Winnipeg Jets'];
$('#nhl').typeahead({
hint: true,
highlight: true,
minLength: 1,
}
,
{
name: 'teams',
source: substringMatcher(teams)
});
</script>
</body>
Head Code
<head>
<link href="Content/bootstrap.css" rel="stylesheet" />
<title></title>
<meta charset="utf-8" />
<style>
body {
margin: 30px;
}
.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 { /* used to be tt-dropdown-menu in older versions */
width: 422px;
margin-top: 4px;
padding: 4px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
line-height: 24px;
}
.tt-suggestion.tt-cursor, .tt-suggestion:hover {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
</style>
</head>
Results
Comments
Post a Comment