Skip to content

Instantly share code, notes, and snippets.

@klabelle33

klabelle33/app.css

Forked from anonymous/autocomplete-test.markdown
Last active October 10, 2016 18:23
Show Gist options
  • Save klabelle33/3b433c757d48c7e0e67ed6a72c4bbcd2 to your computer and use it in GitHub Desktop.
Save klabelle33/3b433c757d48c7e0e67ed6a72c4bbcd2 to your computer and use it in GitHub Desktop.
Download ZIP
autocomplete test
Raw
app.css
body {
box-sizing: border-box;
margin: 0;
padding: 60px 0 0 0;
}
header, footer {
display: block;
box-sizing: border-box;
width: 100%;
height: 60px;
line-height: 60px;
padding: 0 1em;
}
header {
position: fixed;
top: 0;
left: 0;
background: rgba(255, 80, 80, 0.75);
z-index: 1200;
}
footer { background: rgba(255, 80, 80, 0.75); }
section {
padding: 1em 2em;
}
Raw
index.html
<head>
<meta content="initial-scale=1, minimum-scale=1, width=device-width, user-scalable=0" name="viewport">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="app.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>
</head>
<body ng-app="myApp" ng-cloak>
<header>Fixed header</header>
<section ng-app="demo">
<h1>
Inline header
</h1>
<md-autocomplete
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="token in search(searchText)"
md-item-text="token.display"
md-min-length="0"
placeholder="What flavor of cupcake?">
<md-item-template>
<span md-highlight-text="searchText" md-highlight-flags="^i">{{token}}</span>
</md-item-template>
</md-autocomplete>
</section>
<section>
<p>
Jujubes dessert carrot cake cupcake halvah. Brownie marshmallow jujubes cotton candy ice cream jelly-o croissant. Dessert liquorice liquorice chocolate dessert apple pie cookie gummi bears gingerbread. Biscuit oat cake cake caramels soufflé. Gummies cheesecake jelly cake tootsie roll sugar plum sweet chupa chups. Muffin cupcake candy gingerbread ice cream gingerbread. Halvah tart dragée soufflé jelly beans danish sweet ice cream jelly beans. Sweet roll donut cake topping caramels bear claw marshmallow. Toffee biscuit pudding cookie gummi bears chocolate sweet. Cake chocolate cookie chupa chups marzipan tart carrot cake. Bear claw icing lemon drops. Tootsie roll cupcake topping ice cream dragée pastry icing gummies. Marshmallow macaroon lemon drops donut powder jelly beans. Liquorice oat cake sweet roll.
</p>
<p>
Lollipop pie candy canes fruitcake. Dessert gingerbread gummi bears. Jelly-o pie jelly jelly cotton candy. Candy canes topping jujubes carrot cake chupa chups cupcake donut chupa chups cotton candy. Pie tart cake brownie tootsie roll cookie jelly beans marzipan. Pastry pudding dessert candy. Lemon drops gummi bears biscuit cake jujubes topping dragée. Gummies topping muffin tart. Cake sweet roll gingerbread muffin croissant chupa chups wafer pie jelly-o. Carrot cake caramels fruitcake chocolate bar halvah tart liquorice halvah. Jelly-o fruitcake biscuit topping gummies carrot cake carrot cake candy. Jelly beans wafer gummi bears gummies apple pie powder pie.
</p>
<p>
Candy gingerbread croissant cake topping wafer. Cake fruitcake chupa chups jujubes powder carrot cake wafer halvah chocolate. Icing muffin powder sesame snaps tart jelly-o. Jelly-o bonbon marshmallow chupa chups pudding. Candy apple pie dessert halvah fruitcake carrot cake toffee liquorice. Chupa chups pudding gingerbread chupa chups ice cream. Chocolate toffee jujubes. Macaroon cake donut tiramisu marzipan muffin. Sweet roll tootsie roll apple pie sweet tiramisu. Gummies dessert muffin jelly-o soufflé pastry brownie cookie. Pastry oat cake halvah. Macaroon chocolate cake candy canes liquorice jelly beans macaroon marshmallow. Chupa chups tiramisu pie sesame snaps jelly candy jujubes gummies chupa chups. Gummies sweet roll toffee powder icing chupa chups.
</p>
<p>
Tootsie roll biscuit marshmallow macaroon gummi bears macaroon. Biscuit jelly beans jelly beans. Topping carrot cake donut. Pie chocolate caramels chocolate. Bear claw bear claw lemon drops cupcake halvah tart. Chocolate bar jujubes fruitcake. Fruitcake donut marzipan. Icing tart chupa chups icing oat cake. Chupa chups toffee sugar plum. Oat cake wafer jelly-o. Marshmallow croissant tootsie roll. Cake gingerbread gummies soufflé soufflé liquorice fruitcake muffin.
</p>
</section>
<footer>Footer</footer>
</body>
</body>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
Raw
script.js
var myApp = angular.module('myApp',['ngMaterial']);
myApp.run([
'$rootScope',
function ($rootScope) {
var tokens = _([].slice.apply(document.querySelectorAll('p')))
.map((p) => p.textContent.split(' ')) // Split on words.
.flatten() // Flatten.
.map((token) => token.replace(/\W/g, '')) // Remove punctuation.
.filter((token) => token.match(/\w/)) // Remove empty tokens.
.map(_.upperFirst) // Consistent case.
.uniq() // Remove duplicates.
.value();
$rootScope.search = (query) => tokens.filter(
(t) => query ? t.match(new RegExp(query, 'i')) : false);
}
]);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
Raw
styles
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment